From 2d669cd20036666eaee8a8fdd37e3e90c239cb70 Mon Sep 17 00:00:00 2001
From: Marcello Lamonaca <marcello.lamonaca@gmail.com>
Date: Tue, 23 Mar 2021 10:26:26 +0100
Subject: [PATCH] Improve Store notes

---
 JavaScript/React/Redux.md | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/JavaScript/React/Redux.md b/JavaScript/React/Redux.md
index 3d797a8..ce625c1 100644
--- a/JavaScript/React/Redux.md
+++ b/JavaScript/React/Redux.md
@@ -28,10 +28,21 @@ The store will run its reducer function and save the new state value inside.
 
 **Selectors** are functions that know how to extract specific pieces of information from a store state value.
 
+In `initialState.js`;
+
 ```js
+export default {
+    // initial state here
+}
+```
+
+In `configStore.js`:
+
+```js
+// configStore.js
 import { createStore, applyMiddleware, compose } from "redux";
 
-function configStore(initialState) {
+export function configStore(initialState) {
     const composeEnhancers =
         window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
 
@@ -61,7 +72,9 @@ Instead, they must make *immutable updates*, by copying the existing `state` and
 - They must not do any asynchronous logic, calculate random values, or cause other "side effects"
 
 ```js
-function reducer(state, action) {
+import initialState from "path/to/initialState";
+
+function reducer(state = initialState, action) {
     switch(action.type){
         case "ACTION_TYPE":
             return { ...state, prop: value };  // return modified copy of state (using spread operator)
@@ -108,12 +121,14 @@ Used at the root component and wraps all the application.
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
-
 import { Provider } from 'react-redux'
-import store from './store'
 
+import { configStore } from 'path/to/configStore';
+import initialState from "path/to/initialState";
 import App from './App'
 
+const store = configStore(initialState);
+
 const rootElement = document.getElementById('root')
 ReactDOM.render(
   <Provider store={store}>