高效学习 react 笔记四:redux 和 react-red
2019-06-23 本文已影响10人
littleyu
上文我们已经用自己的 eventHub
来完成了任意组件之间的通讯,接下来我们使用 redux
来达到相同的功能。
直接看官网的例子,我们直接开始改写这样
image.png可以看到思路和我们的
eventHub
差不多,只不过redux
使用了更多新名词(吐槽...)订阅事件用subscribe
, 触发事件用dispatch
,触发事件的名字用type
,传递的参数为payload
。
虽然我们现在已经用 redux
来改写了这个例子,但是这个方法还是不够优雅,
我们在改变数据的时候,还是需要数据一层一层的往下传,对比于最早的 props
只是少了一层一层往上传而已,但是这始终还是没有解决问题。
所以为了解决这个问题,于是我们现在要使用 react-redux 再来改造这个例子
整体依旧不变,我们只是为了解决一层一层往下传递的问题,所以我们只需要用 Provider
把 App
包起来,在用 connect
连接子组件即可。
对比用
redux
,react-redux
不需要在额外去订阅render
函数,不需要再通过props
一层一层的去传递数据,只需要用Provider
将App
组件包装,再用connect
将子组件包装即可使用。
在这个栗子中我们得以看出:
我们通过
<ReactRedux.Provider store={store}><App /></ReactRedux.Provider>
把App
包起来之后,我们只需再在组件内使用ReactRedux.connect
这个API
,然后在第一个括号里,传入mapStateToProps
和mapDispatchToProps
这两个变量以后,我们就能直接在组建内使用props.数据
使用,这样就避免了最初通过props
一层一层的传递数据。
ps:又多学了两个 API
:)(手动狗头)