zoukankan      html  css  js  c++  java
  • [Redux] Refactoring the Entry Point

    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;
  • 相关阅读:
    常见SQL语句
    测试用例的设计
    移动端测试注意事项
    markdown编辑模式基本使用
    常用修改请求或返回方法
    前端性能测试工具Lighthouse
    presto环境部署
    pyenv管理python版本
    python2.6.6升级python2.7.14
    InfluxDB权限认证机制
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5558044.html
Copyright © 2011-2022 走看看