redux超易学三篇之二(开始使用react-redux)
其实 redux 真正让人感到混乱的还是在 react-redux 的使用中。
请配合完整代码参考~:完整源代码
也不是说混乱,主要是网上 推崇 最佳实践。学习一个新东西的时候,本来就很陌生,上来就用最佳实践,当然让人摸不着头脑。
其实搞定 react-redux 主要分两点:
- 容器组件 和 展示组件 的最佳实践 (难就难在这里,系统架构层次的难)
办法:想办法精通react props 的传值。
- 另外一个就是 react-redux 的固定用法了。
1.数据从哪里来? 高阶组件(容器组件)其实就是解决这么一个问题。 --- 高阶组件是一个函数!!!函数!!!
严格地区分了各国人的进入,就能防止罪犯的逃逸。
你们懂的,如果希望稳定,有时候就需要滴水不漏。
单独举个例子区分一下,数据的来源假设有三种
- localStorage
- 调用web接口获得的
- state里面的数据
这里参考 react 小书的(要付钱哦):http://huziketang.mangojuice.top/books/react/lesson28
也可以直接看我代码 src 层的 higher/simple 中的 demoCreateHigher、demoUseHigher 文件。
- demoCreateHigher:一个函数,参数是 (组件,需要从本地获取的属性),返回一个带 props 的组件。
完成了获取本地数据的 逻辑。
- demoUseHigher:先定义了一个组件,此后使用demoCreateHigher创建了一个我们真正需要的组件(相当于类的实例化)。
总结:当有两个组件都需要从 本地 localStorage 加载相关的数据,上述的高阶组件就能很好地 实现逻辑的复用。复用的同时也将 获取数据的 逻辑和纯组件 解耦。
一举两得。
2.然后我们通过对数据的剥离,构造纯组件,降低耦合性。
其实可以这样理解: 容器组件 = 高阶组件(函数) 处理过后的 展示组件。=>也就是我们第一点说的 处理完逻辑 之后的展示组件。
展示组件 | 容器组件 | |
---|---|---|
作用 | 展示样式和骨架 | 描述如何运行?数据获取/状态更新 |
直接使用redux? | 否 | 是 |
数据来源 | props | 监听redux |
数据修改 | 调用props中的回调函数 | 由redux派发 |
调用方式(这个我没理解) | 手动 | 由react-redux生成 |
上面贴了一张官网的图(http://www.redux.org.cn/docs/basics/UsageWithReact.html),拿我们之前的 redux 例子来 架构一下吧~
我们之前的 reducer 有什么内容呢? 创造奇迹 和 通过成长改变人的状态 和 添加女朋友(不存在的,已PASS)
展示组件
- MiracleList:用于展示奇迹列表(可以被添加)
miracle: [] / Array ---- 结构 {text: ''}
method: itemClick(这里刚开始不用你redux的时候使我们写在app层测试的,但是用上 redux 后就用其对应的 高阶组件处理后传给它了) - MiracleItem:专门展示奇迹事项
text: String
method: 来自 MiracleList 传下来的 onClick ->onClick = {() => this.props.onClick()}
容器组件:其实这里主要是redux中的数据对 展示组价 中所需要的 数据的一种映射链接
- MiracleInput:用于添加奇迹项目
因为其和 redux 联系较多,所以这里将其放置在容器组件中
容器组件(其实就是利用 store.subscribe() 将redux 和原来的组件链接起来的东西罢了)
完成了上面的步骤,其实我们就完成了 使用 redux 进行数据的 增加操作,其实这个时候我们已经基本能够使用 redux 了。
完成的 redux 还请切换分支到 react-redux-all 哦~~~~~
一遍一遍的咀嚼,总会烂的。