React [7]（Redux）

[HuangHongRui]

Redux 基本原则 2015年出生。。

在Flux的基本原则”单向数据流”的基础上强调三个基本原则：

1. 唯一数据源 【应用的状态数据存储在唯一一个Store上】
2. 保持状态只读 【改变应用的状态是创建一个新的状态对象返回给Redux，由它完成新的状态组装】
3. 数据改变只能通过春函数完成

[HuangHongRui]

在Redux中， 每个reducer 的函数签名如下： reducer（state, action） 第一个参数是当前状态，第二个参数action是收到的action对象，而reducer函数要做的事情，就是根据2参数的值产生一个新的对象返回。 reducer必须是纯函数，就是说函数返回的结果必须完全由2参数决定，而且不产生任何副作用，也不可修改参数对象。

[HuangHongRui]

Redux 中很多函数都是返回一个对象，不产生什么副作用的动作。

因为Redux中让全局只有一个store，所以就没必要创造一个 Dispatcher 对象了。。而 “分发” 这个功能，也简化为Store对象上一个dispatch函数。。

createStore() Redux库提供的函数。 第一个参数为更新状态的reducer，第二参数是状态为初始值，第三参数是代表 Store Enhancer

[HuangHongRui]

在Redux框架下，一个React组件基本上要完成一下2个功能：

1. 和Redux store 打交道，读取store状态，用于初始化组件的状态，同时还要监听store的状态改变，当store状态发生时，需要更新组件状态，从而驱动组件重新渲染，当需要更新store时，派发action对象。
2. 根据当前props和state，渲染出用户界面。。

[HuangHongRui]

如果React 要包办上面两个任务，似乎工作稍多，那么可考虑拆分为2组件。 这样的关系为父子组件关系。。。 承担第一个任务的组件，是负责和Redux store 打交道的组件，处于外层，称为容器组件（聪敏） 承担第二个任务的组件，是只负责渲染界面的组件，处内层，称为展示组件（傻瓜）

傻瓜组件是纯函数，不需要有状态了！！！（拆分的主要目的之一）根据props产生的结果来渲染结果，不需要state。。

[HuangHongRui]

当组件完全没有 “state” ，只有一个render方法， 所有数据都来自 “props”， 这种组件叫 ”无状态“ 组件。

React 支持只用一个函数代表的无状态组件， 因为没有状态，不需要对象表示，所以连类都不需要了， 对于一个只有render方法的组件，缩略为一个函数足矣。

无状态组件的props参数和有状态组件的this.props内容和结构完全一样。。

[HuangHongRui]

组件 Context

组件中直接导入Store 是非常不利于组件复用的。。。

一个应用中，只有一个地方需要直接导入Store..那就是 最顶层React组件的位置。其他组件避免直接导入。

context 就是 ”上下文环境“ ，让一个树状组件上所有组件都能访问一个共同的对象。。

首先上级组件需要宣传自己支持context，并且提供一个函数来返回代表Context的对象， 然后这个上级组件之下的所有子孙组件，只要宣称自己需要这个Context，就可以通过this.context访问到这个共同的环境对象。。

对于Redux来说，Context来传递Store是个不错的选择。。

[HuangHongRui]

React - Redux

不用组件实现 Proveider ，而是从 react-redux 库 导入 Provider

react-redux 两个最主要功能：

• connect 链接容器组件和傻瓜组件
• Provider 提供包含store 的 context