[Redux] Refactoring the Entry point

We'll learn how to better separate the "code in the" the entry point-to-prepare it for adding the router.

Currently, in the Index.js, we configure the store and bootstrap our APP component:

Import ' Babel-polyfill '; import React from' React '; import {render} from' React-dom '; import {Provider} from' React-redux '; import {createstore} from' Redux '; import Throttle from' Lodash/throttle '; import Todoapp from'./reducers '; import App from'./components/app '; import {loadState, saveState} from'./localstorage '; Const Persistedstate=loadState (); Const store=CreateStore (Todoapp, persistedstate); Store.subscribe (throttle ()={saveState ({todos:store.getState (). Todos,});},1000) ); Render (<provider store={store}> <app/> </provider>, document.getElementById (' root '));

I ' m extracting the logic necessary to create the store, and to subscribe-to-persist, the state into a separate file.

I ' m calling this file configure store, and so I ' m creating a function called Configure store that's going to contain T His logic so, the app doesn ' t had to know exactly how the store was created and if we had any subscribe handlers on I T. It can just use the return store in the Index.js file.

// Index.js  ' Babel-polyfill' react' react-dom' react-redux'./configurestore '  './components/root '= configurestore (); render (  <root store={store}/>,  document.getElementById (' root '));

Also extract the Provider from Index.js and replace with a Root, so this later we can use React-router inside Root compone Nt:

//Configurestore.jsImport {CreateStore} from' Redux '; import Todoapp from'./reducers '; import {loadState, saveState} from'./localstorge 'Import Throttle from' Lodash/throttle '; Const Configurestore= () + ={Const Persistedstate=loadState (); Const Store=CreateStore (Todoapp, persistedstate);    Console.log (Store.getstate ()); Store.subscribe (Throttle ()={Console.log (Store.getstate ()); const {Todos}=store.getstate (); SaveState ({todos})},1000)); returnstore;} ExportdefaultConfigurestore;

// Components/root.js  ' react' React-redux './app '= ({store}) = (    <provider Store ={store}>        <app/>    </Provider>default Root;

[Redux] Refactoring the Entry point