redux超易学三篇之二（开始使用react-redux）

Posted 2020-11-18 can-i-do

其实 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 哦~~~~~