Skip to content

Commit c46b938

Browse files
author
kenberkeley
committed
rename make=>create[Container/Reducer]
1 parent 7595c69 commit c46b938

File tree

10 files changed

+34
-31
lines changed

10 files changed

+34
-31
lines changed

‎README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,14 @@
110110
```
111111

112112
在这里您可能会问：怎么没有 `containers/` 目录？
113-
在我的理解里，木偶组件与智能组件最大的差别在于：
113+
在本项目中，木偶组件与智能组件最大的差别在于：
114114
前者的状态是通过父组件传入获得，而后者是直接**连接**到 `state` 获得
115115
亦即：若一个木偶组件直接**连接**到 `state`，那么它就是一个所谓的智能组件
116-
（详见 [`src/utils/makeContainer.js`][makeContainer] 中对 `react-redux` 的 [`connect`][connect] 函数的封装）
116+
（详见 [`src/utils/createContainer.js`][createContainer] 中对 `react-redux` 的 [`connect`][connect] 函数的封装）
117117
本示例项目唯一在组件的定义中自行使用 `connect` 函数的是 [`Navbar`][Navbar] 组件（且用到了 ES7 的装饰器）
118118

119+
有关木偶组件与智能组件更为精确的论述，推荐 Redux 作者 Dan 的[这篇文章][dan-post]，避免教条主义
120+
119121
> 您可以根据业务需求改动目录结构。若目录使用频繁，建议配置 [路径别名](#alias)
120122
> 默认的路径别名见上面目录结构注释中大写形式的常量
121123
@@ -207,9 +209,10 @@
207209
[how-to-start]: https://github.com/kenberkeley/react-demo/issues/1
208210
[service-intro]: https://github.com/kenberkeley/vue-demo#service-layer
209211
[alias-intro]: https://github.com/kenberkeley/vue-demo#alias
210-
[makeContainer]: https://github.com/kenberkeley/react-demo/blob/master/src/utils/makeContainer.js
212+
[createContainer]: https://github.com/kenberkeley/react-demo/blob/master/src/utils/createContainer.js
211213
[Navbar]: https://github.com/kenberkeley/react-demo/blob/master/src/components/Navbar/index.js
212-
[connect]: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
214+
[connect]: https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
215+
[dan-post]: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
213216
[chrome-extension]: https://github.com/zalmoxisus/redux-devtools-extension
214217
[devtools-component]: https://github.com/gaearon/redux-devtools
215218
[redux-logger]: https://github.com/evgenyrodionov/redux-logger

‎src/components/Navbar/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import LogoutDropdown from './LogoutDropdown'
66

77
/* 导航栏全局显示，控制着用户的登录注销 */
88

9-
@connect( // 功能同 UTIL/makeContainer
9+
@connect( // 功能同 UTIL/createContainer
1010
({ userData }) => ({ userData }),
1111
require('ACTION/user').default
1212
)

‎src/redux/reducers/msg/displayControl.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import makeReducer from 'UTIL/makeReducer'
1+
import createReducer from 'UTIL/createReducer'
22
import { ACTION_HANDLERS } from 'ACTION/msg/displayControl'
33
import initState from 'STORE/initState'
44

5-
export default makeReducer(initState.msg.displayControl, ACTION_HANDLERS)
5+
export default createReducer(initState.msg.displayControl, ACTION_HANDLERS)

‎src/redux/reducers/msg/msgs.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import makeReducer from 'UTIL/makeReducer'
1+
import createReducer from 'UTIL/createReducer'
22
import { ACTION_HANDLERS } from 'ACTION/msg/msg'
33
import initState from 'STORE/initState'
44

5-
export default makeReducer(initState.msg.msgs, ACTION_HANDLERS)
5+
export default createReducer(initState.msg.msgs, ACTION_HANDLERS)

‎src/redux/reducers/todo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import makeReducer from 'UTIL/makeReducer'
1+
import createReducer from 'UTIL/createReducer'
22
import { ACTION_HANDLERS } from 'ACTION/todo'
33
import initState from 'STORE/initState'
44

5-
export default makeReducer(initState.todos, ACTION_HANDLERS)
5+
export default createReducer(initState.todos, ACTION_HANDLERS)

‎src/redux/reducers/user.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import makeReducer from 'UTIL/makeReducer'
1+
import createReducer from 'UTIL/createReducer'
22
import { ACTION_HANDLERS } from 'ACTION/user'
33
import initState from 'STORE/initState'
44

5-
export default makeReducer(initState.userData, ACTION_HANDLERS)
5+
export default createReducer(initState.userData, ACTION_HANDLERS)

‎src/routes/msg.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { injectReducer } from 'REDUCER'
22
import userAuth from 'UTIL/userAuth' // 用户访问拦截器
3-
import makeContainer from 'UTIL/makeContainer'
3+
import createContainer from 'UTIL/createContainer'
44

5-
const connectComponent = makeContainer(
5+
const connectComponent = createContainer(
66
({ userData, msg }) => ({ userData, msg }), // mapStateToProps
77
require('ACTION/msg').default // mapActionCreators
88
)

‎src/routes/todo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { injectReducer } from 'REDUCER'
2-
import makeContainer from 'UTIL/makeContainer'
2+
import createContainer from 'UTIL/createContainer'
33

44
export default {
55
path: 'todo',
@@ -18,7 +18,7 @@ export default {
1818
injectReducer('todos', require('REDUCER/todo').default)
1919

2020
/* 组件连接 state */
21-
const TodoContainer = makeContainer(
21+
const TodoContainer = createContainer(
2222
({ todos }) => ({ todos }), // mapStateToProps,
2323
require('ACTION/todo').default, // mapActionCreators,
2424
require('COMPONENT/Todo/').default // 木偶组件

‎src/utils/makeContainer.js renamed to ‎src/utils/createContainer.js

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { connect } from 'react-redux'
2-
3-
/**
4-
* 将木偶组件变成智能组件
5-
* @param {Function} mapStateToProps
6-
* @param {Object} mapActionCreators
7-
* @param {Component?}
8-
* @return {Connect : Container}
9-
*/
10-
export default function makeContainer(mapStateToProps, mapActionCreators, component) {
11-
const connectComponent = connect(mapStateToProps, mapActionCreators)
12-
return component ? connectComponent(component) : connectComponent
13-
}
1+
import { connect } from 'react-redux'
2+
3+
/**
4+
* 将木偶组件变成智能组件
5+
* @param {Function} mapStateToProps
6+
* @param {Object} mapActionCreators
7+
* @param {Component?}
8+
* @return {Connect : Container}
9+
*/
10+
export default function createContainer(mapStateToProps, mapActionCreators, component) {
11+
const connectComponent = connect(mapStateToProps, mapActionCreators)
12+
return component ? connectComponent(component) : connectComponent
13+
}

‎src/utils/makeReducer.js renamed to ‎src/utils/createReducer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @param {Object} handlers
44
* @return {Reducer}
55
*/
6-
export default function makeReducer(initState, handlers) {
6+
export default function createReducer(initState, handlers) {
77
return function reducer(state = initState, action) {
88
const handler = handlers[action.type]
99
return handler ? handler(state, action) : state

0 commit comments

Comments
 (0)