//import省略
const store = applyMiddleware(ReduxThunk)(createStore)(reducers);
const App = connect(
state => (state),
dispatch => ({
action: bindActionCreators(actions, dispatch)
})
)(Component);
const mountPoint = document.createElement('div');
mountPoint.setAttribute('id', 'root');
document.body.appendChild(mountPoint);
render(
<Provider store={store}>
<App />
</Provider>,
mountPoint
);
我知道子组件可以通过设置contextTypes来获取store,但是store里面只有dispatch、getState等方法,并没有bindActionCreators处理过的action。
这导致我在子组件中,又要重新用dispatch去发起更新state请求
我猜测原因时 action 在 App 组件上而不在 Provider 上。
所以子组件想要通过context获取action必须在App组件里设置childContextTypes吗?
我听说redux对react的context有封装,如果自己在App组件中写childContextTypes,是不是脱离了redux了?
在 react 中应用 redux 应该遵守容器组件、UI 组件的分层设计模式(react-redux)。
如果你在子组件里面有调用 action 的需求,那么一种是父组件通过
props
传递action
到子组件,还有一种就是创建一个子组件的容器组件,在容器组件中通过mapDispatchToProps
来绑定actions
。遵循这种设计模式让分层更加清晰、降低耦合,有利于重用和单元测试。
好的分层设计有利于测试,请看这篇:https://segmentfault.com/a/1190000015935519