[Redux] Refactoring the Entry Point
2024-08-27 11:47:55
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;
最新文章
- bzoj1458 士兵占领
- java 导出Excel文件
- ThinkPhp之分页
- 纯CSS最小响应网格布局
- ZOJ - 3195 Design the city
- HDU5327
- 本地yum源安装GCC
- CentOS安装rar及用法
- Java 求集合的所有子集
- popwindow+动画
- 树——B-树
- scp复制文件到远程服务器上
- Kolmogorov–Smirnov test(KS)
- mysql百分比显示
- CentOS7 Failed to start LSB: Bring up/down networking.解决方法
- Plotagraph软件五分钟光速速成傻瓜教程
- ES6 模块与 CommonJS 模块的差异
- python requests http请求
- python递归的例子
- Python 简说 list,tuple,dict,set