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;
  • 相关阅读:
    vc++操作mysql数据库的技巧
    [翻译]用表单字段加亮的方式为用户提供友好的界面
    设计方法开篇
    周末之个人杂想(五)
    ComponentArt对Atlas的集成
    [翻译]使用ASP.NET2.0的ReportViewer查看RDLC报表
    [视频讲解]GridView里做链接实现新闻列表到详细内容页的跳转
    关于正则表达式
    周末之个人杂想(七)

  • 原文地址:https://www.cnblogs.com/Answer1215/p/5558044.html
Copyright © 2011-2022 走看看