[Redux] Refactoring the Entry Point

Posted 2020-07-20 Answer1215

We will learn how to better separate the code in 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 it 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 is going to contain this logic so that the app doesn‘t have to know exactly how the store is created and if we have any subscribe handlers on it. It can just use the return store in the index.js file.

//index.js

import ‘babel-polyfill‘;
import React from ‘react‘;
import { render } from ‘react-dom‘;
import { Provider } from ‘react-redux‘;
import configureStore from ‘./configureStore‘;
import Root from ‘./components/Root‘;

const store = configureStore();

render(
  <Root store={store}/>,
  document.getElementById(‘root‘)
);

 

Also extract the Provider from index.js and replace with a Root, so that later we can use react-router inside Root component:

//configureStore.js

import { 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));

    return store;
}

export default configureStore;

 

// components/Root.js

import React from ‘react‘;
import {Provider} from ‘react-redux‘;
import App from ‘./App‘;

const Root = ({ store }) => (
    <Provider store={store}>
        <App />
    </Provider>
)

export default Root;