├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── pictures
├── section-redux-async-1.png
├── section-redux-async-2.png
├── section-redux-async-3.png
├── section-redux-async-4.png
└── section-redux-async-5.png
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── index.js
├── pages
│ ├── Detail
│ │ ├── index.js
│ │ ├── index.jsx
│ │ └── reducer.js
│ ├── Home
│ │ ├── index.js
│ │ ├── index.jsx
│ │ └── reducer.js
│ ├── List
│ │ ├── index.js
│ │ ├── index.jsx
│ │ └── reducer.js
│ ├── Root.jsx
│ └── rootReducer.js
└── store
│ ├── createStore.js
│ └── reducerUtils.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Qiutc
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Redux store 的动态注入
2 |
3 | ---
4 |
5 | # 前言
6 |
7 | 在 React + Redux + React-Router 的单页应用架构中，我们将 UI 层（ React 组件）和数据层（ Redux store ）分离开来，以做到更好地管理应用的。
8 | Redux store 既是存储整个应用的数据状态，它的 state 是一个树的数据结构，可以看到如图的例子：
9 |
10 | 
11 |
12 | 而随着应用和业务逻辑的增大，项目中的业务组件和数据状态也会越来越多；在 Router 层面可以使用 React-Router 结合 webpack [做按需加载](https://reacttraining.com/react-router/web/guides/static-routes) 以减少单个 js 包的大小。
13 | 而在 store 层面，随着应用增大，整个结构可能会变的非常的大，应用加载初始化的时候就会去初始化定义整个应用的 store state 和 actions ，这对与内存和资源的大小都是一个比较大的占用和消耗。
14 |
15 | 因此如何做到像 Router 一样地在需要某一块业务组件的时候再去添加这部分的 Redux 相关的数据呢？
16 |
17 | **Redux store 动态注入** 的方案则是用以解决以上的问题。
18 |
19 | 在阅读本文的时候建议了解以下一些概念：
20 | - [Redux 的数据流概念与文档](http://redux.js.org/)
21 | - [React-Router v4 文档](https://reacttraining.com/react-router/web/guides/philosophy)
22 | - [redux 大法好 —— 入门实例 TodoList
23 | ](https://qiutc.me/post/redux-%E5%A4%A7%E6%B3%95%E5%A5%BD-%E2%80%94%E2%80%94-%E5%85%A5%E9%97%A8%E5%AE%9E%E4%BE%8B-TodoList.html)
24 |
25 | ---
26 |
27 | # 方案实践
28 |
29 | ## 原理
30 |
31 | 在 Redux 中，对于 store state 的定义是通过组合 reducer 函数来得到的，也就是说 reducer 决定了最后的整个状态的数据结构。在生成的 store 中有一个 [replaceReducer(nextReducer)](http://redux.js.org/docs/api/Store.html#replaceReducer) 方法，它是 Redux 中的一个高阶 API ，该函数接收一个 `nextReducer` 参数，用于替换 store 中原原有的 reducer ，以此可以改变 store 中原有的状态的数据结构。
32 |
33 | 因此，在初始化 store 的时候，我们可以只定义一些默认公用 reducer（登录状态、全局信息等等），也就是在 `createStore` 函数中只传入这部分相关的 reducer ，这时候其状态的数据结构如下：
34 |
35 | 
36 |
37 | 当我们加载到某一个业务逻辑对应的页面时，比如 `/home`，这部分的业务代码经过 Router 中的处理是按需加载的，在其初始化该部分的组件之前，我们可以在 store 中注入该模块对应的 reducer ，这时候其整体状态的数据结构应该如下：
38 |
39 | 
40 |
41 | 在这里需要做的就是将新增的 reducer 与原有的 reducer 组合，然后通过 `store.replaceReducer` 函数更新其 reducer 来做到在 store 中的动态注入。
42 |
43 | ## 代码
44 |
45 | 话不多说，直接上代码 [https://github.com/TongchengQiu/react-redux-dynamic-injection](https://github.com/TongchengQiu/react-redux-dynamic-injection) ，示例项目的目录结构如下：
46 |
47 | ```
48 | .
49 | ├── src
50 | | ├── pages
51 | | | ├── Detail
52 | | | | ├── index.js
53 | | | | ├── index.jsx
54 | | | | └── reducer.jsx
55 | | | ├── Home
56 | | | | ├── index.js
57 | | | | ├── index.jsx
58 | | | | └── reducer.jsx
59 | | | ├── List
60 | | | | ├── index.js
61 | | | | ├── index.jsx
62 | | | | └── reducer.jsx
63 | | | ├── Root.js
64 | | | └── rootReducer.js
65 | | ├── store
66 | | | ├── createStore.js
67 | | | ├── location.js
68 | | | └── reducerUtil.js
69 | | └── index.js
70 | └── package.json
71 | ```
72 |
73 | ### 入口
74 |
75 | 首先来看整个应用的入口文件 `./src/index.js` ：
76 |
77 | ```js
78 | import React from 'react';
79 | import ReactDOM from 'react-dom';
80 | import Root from './pages/Root';
81 |
82 | ReactDOM.render(, document.getElementById('root'));
83 | ```
84 |
85 | 这里所做的就是在 `#root` DOM 元素上挂载渲染 `Root` 组件；
86 |
87 | ### Root 根组件
88 |
89 | 在 `./src/pages/Root.jsx` 中：
90 |
91 | ```js
92 | import React, { Component} from 'react';
93 | import { Provider } from 'react-redux';
94 | import { Link, Switch, Route, Router as BrowserRouter } from 'react-router';
95 |
96 | import createStore from '../store/createStore';
97 | import { injectReducer } from '../store/reducerUtils';
98 | import reducer, { key } from './rootReducer';
99 |
100 | export const store = createStore({} , {
101 | [key]: reducer
102 | });
103 |
104 | const lazyLoader = (importComponent) => (
105 | class AsyncComponent extends Component {
106 | state = { C: null }
107 |
108 | async componentDidMount () {
109 | const { default: C } = await importComponent();
110 | this.setState({ C });
111 | }
112 |
113 | render () {
114 | const { C } = this.state;
115 | return C ? : null;
116 | }
117 | }
118 | );
119 |
120 | export default class Root extends Component {
121 | render () {
122 | return (
123 |
124 |
125 |
126 |
127 | Home
128 |
129 | List
130 |
131 | Detail
132 |
133 | import('./Home'))}
135 | />
136 | import('./List'))}
138 | />
139 | import('./Detail'))}
141 | />
142 |
143 |
144 |
145 |
146 |
21 |
Detail Counter: { count }
22 |
23 |
24 |
25 |
26 | );
27 | }
28 | };
29 |
30 | export default connect(mapStateToProps, mapDispatchTpProps)(Detail);
31 |
--------------------------------------------------------------------------------
/src/pages/Detail/reducer.js:
--------------------------------------------------------------------------------
1 | import { createReducer } from '../../store/reducerUtils';
2 |
3 | export const key = 'detail';
4 |
5 | export const DETAIL_INCREMENT = `${key}/DETAIL_INCREMENT`;
6 | export const DETAIL_DOUBLE_ASYNC = `${key}/DETAIL_DOUBLE_ASYNC`;
7 |
8 | export const increment = (value = 1) => (
9 | {
10 | type: DETAIL_INCREMENT,
11 | payload: value
12 | }
13 | );
14 |
15 | export const doubleAsync = () => (
16 | (dispatch, getState) => (
17 | new Promise((resolve) => {
18 | setTimeout(() => {
19 | dispatch({
20 | type: DETAIL_DOUBLE_ASYNC,
21 | payload: null
22 | });
23 | resolve();
24 | }, 200);
25 | })
26 | )
27 | );
28 |
29 | export const actions = {
30 | increment,
31 | doubleAsync
32 | };
33 |
34 | const ACTION_HANLDERS = {
35 | [DETAIL_INCREMENT]: (state, action) => ({
36 | ...state,
37 | count: state.count + action.payload
38 | }),
39 | [DETAIL_DOUBLE_ASYNC]: (state, action) => ({
40 | ...state,
41 | count: state.count * 2
42 | }),
43 | };
44 |
45 | const initalState = {
46 | count: 0
47 | };
48 |
49 | export default createReducer(initalState, ACTION_HANLDERS);
50 |
--------------------------------------------------------------------------------
/src/pages/Home/index.js:
--------------------------------------------------------------------------------
1 | import { injectReducer } from '../../store/reducerUtils';
2 | import { store } from '../Root';
3 | import Home from './index.jsx';
4 | import reducer, { key } from './reducer';
5 |
6 | injectReducer(store, { key, reducer });
7 |
8 | export default Home;
9 |
--------------------------------------------------------------------------------
/src/pages/Home/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import { increment, doubleAsync, key } from './reducer';
5 |
6 | const mapStateToProps = (state) => ({
7 | count: state[key].count
8 | });
9 |
10 | const mapDispatchTpProps = {
11 | increment: () => increment(1),
12 | doubleAsync
13 | };
14 |
15 | class Home extends Component {
16 | render() {
17 | const { count, increment, doubleAsync } = this.props;
18 |
19 | return (
20 |
21 |
Counter: { count }
22 |
23 |
24 |
25 |
26 | );
27 | }
28 | };
29 |
30 | export default connect(mapStateToProps, mapDispatchTpProps)(Home);
31 |
--------------------------------------------------------------------------------
/src/pages/Home/reducer.js:
--------------------------------------------------------------------------------
1 | import { createReducer } from '../../store/reducerUtils';
2 |
3 | export const key = 'home';
4 |
5 | export const HOME_INCREMENT = `${key}/HOME_INCREMENT`;
6 | export const HOME_DOUBLE_ASYNC = `${key}/HOME_DOUBLE_ASYNC`;
7 |
8 | export const increment = (value = 1) => (
9 | {
10 | type: HOME_INCREMENT,
11 | payload: value
12 | }
13 | );
14 |
15 | export const doubleAsync = () => (
16 | (dispatch, getState) => (
17 | new Promise((resolve) => {
18 | setTimeout(() => {
19 | dispatch({
20 | type: HOME_DOUBLE_ASYNC,
21 | payload: null
22 | });
23 | resolve();
24 | }, 200);
25 | })
26 | )
27 | );
28 |
29 | export const actions = {
30 | increment,
31 | doubleAsync
32 | };
33 |
34 | const ACTION_HANLDERS = {
35 | [HOME_INCREMENT]: (state, action) => ({
36 | ...state,
37 | count: state.count + action.payload
38 | }),
39 | [HOME_DOUBLE_ASYNC]: (state, action) => ({
40 | ...state,
41 | count: state.count * 2
42 | }),
43 | };
44 |
45 | const initalState = {
46 | count: 0
47 | };
48 |
49 | export default createReducer(initalState, ACTION_HANLDERS);
50 |
--------------------------------------------------------------------------------
/src/pages/List/index.js:
--------------------------------------------------------------------------------
1 | import { injectReducer } from '../../store/reducerUtils';
2 | import { store } from '../Root';
3 | import List from './index.jsx';
4 | import reducer, { key } from './reducer';
5 |
6 | injectReducer(store, { key, reducer });
7 |
8 | export default List;
9 |
--------------------------------------------------------------------------------
/src/pages/List/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | import { increment, doubleAsync, key } from './reducer';
5 |
6 | const mapStateToProps = (state) => ({
7 | count: state[key].count
8 | });
9 |
10 | const mapDispatchTpProps = {
11 | increment: () => increment(2),
12 | doubleAsync
13 | };
14 |
15 | class List extends Component {
16 | render() {
17 | const { count, increment, doubleAsync } = this.props;
18 |
19 | return (
20 |
21 |
List Counter: { count }
22 |
23 |
24 |
25 |
26 | );
27 | }
28 | };
29 |
30 | export default connect(mapStateToProps, mapDispatchTpProps)(List);
31 |
--------------------------------------------------------------------------------
/src/pages/List/reducer.js:
--------------------------------------------------------------------------------
1 | import { createReducer } from '../../store/reducerUtils';
2 |
3 | export const key = 'list';
4 |
5 | export const LIST_INCREMENT = `${key}/LIST_INCREMENT`;
6 | export const LIST_DOUBLE_ASYNC = `${key}/LIST_DOUBLE_ASYNC`;
7 |
8 | export const increment = (value = 1) => (
9 | {
10 | type: LIST_INCREMENT,
11 | payload: value
12 | }
13 | );
14 |
15 | export const doubleAsync = () => (
16 | (dispatch, getState) => (
17 | new Promise((resolve) => {
18 | setTimeout(() => {
19 | dispatch({
20 | type: LIST_DOUBLE_ASYNC,
21 | payload: null
22 | });
23 | resolve();
24 | }, 200);
25 | })
26 | )
27 | );
28 |
29 | export const actions = {
30 | increment,
31 | doubleAsync
32 | };
33 |
34 | const ACTION_HANLDERS = {
35 | [LIST_INCREMENT]: (state, action) => ({
36 | ...state,
37 | count: state.count + action.payload
38 | }),
39 | [LIST_DOUBLE_ASYNC]: (state, action) => ({
40 | ...state,
41 | count: state.count * 2
42 | }),
43 | };
44 |
45 | const initalState = {
46 | count: 0
47 | };
48 |
49 | export default createReducer(initalState, ACTION_HANLDERS);
50 |
--------------------------------------------------------------------------------
/src/pages/Root.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component} from 'react';
2 | import { Provider } from 'react-redux';
3 | import { Link, Switch, Route, BrowserRouter as Router } from 'react-router-dom';
4 |
5 | import createStore from '../store/createStore';
6 | import reducer, { key } from './rootReducer';
7 |
8 | export const store = createStore({} , {
9 | [key]: reducer
10 | });
11 |
12 | const lazyLoader = (importComponent) => (
13 | class AsyncComponent extends Component {
14 | state = { C: null }
15 |
16 | async componentDidMount () {
17 | const { default: C } = await importComponent();
18 | this.setState({ C });
19 | }
20 |
21 | render () {
22 | const { C } = this.state;
23 | return C ? : null;
24 | }
25 | }
26 | );
27 |
28 | export default class Root extends Component {
29 | render () {
30 | return (
31 |
32 |
33 |
34 |
35 | Home
36 |
37 | List
38 |
39 | Detail
40 |
41 | import('./Home'))}
43 | />
44 | import('./List'))}
46 | />
47 | import('./Detail'))}
49 | />
50 |
51 |
52 |
53 |
54 |