浅谈在React中使用Redux数据流（三）

心已赠人 2022-06-15 01:47 190阅读 0赞

1、react-redux项目结构

几个文件和文件夹：

1) actions：存放Action，用户的行为；

2) components：展示组件；

3) containers：容器组件；

4) reducers：Store里负责分发用户的行为，根据不同的行为作出不同的响应

5) index.html：母版文件，最终最顶层的组件需要渲染到一个DOM节点上，这需要一个HTML模板来实现，这个模板放在index.html中；

6) index.js：项目的跟入口文件；

7) server.js：把真个该项目跑起来，包括对其的构建；

8) webpack：需要一个webpack的打包配置文件。

2、action

1) action是行为的抽象；

2) action是一个普通的JS对象，就是一个Object；

3) action必须要有一个type，type是唯一的；

4) action一般由方法来生成。

3、reducer

1) reducer是响应的抽象；

2) reducer必须是一个纯方法，也就是可以完全根据输入得到输出（非纯方法可能依赖当前时间、系统状态等）；

3) reducer传入的是旧状态和action，返回新状态。

4、store

1) action其实不是直接作用于reducer，而是作用于store上；

2) reducer其实是根据store来作出响应，store其实是state加上reducer的混合体，也就是数据和状态的存储；

3) store是唯一的，也就是唯一状态树；

4) store包括了完整的state，也即项目的整个状态；

5) store完全可预测，也即能想象到发生不同action时state将发生什么样的变化。

5、组件：

React写的都是组件，但引入数据流以后，把组件分成两类：一类是container，另一类是component。

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; </td> 
 <td> container </td> 
 <td> component </td> 
 </tr> 
 <tr> 
 <td> 目的 </td> 
 <td> 如何工作（如何获取数据，状态如何更新） </td> 
 <td> 如何显示（样式，布局） </td> 
 </tr> 
 <tr> 
 <td> 是否在Redux数据流中 </td> 
 <td> 是，Redux知道container存在，因为reducer根据用户的action决定如何响应后，就是作用于container上的 </td> 
 <td> 否，Redux并不知道component存在 </td> 
 </tr> 
 <tr> 
 <td> 读取数据 </td> 
 <td> 从Redux获取state，即当行为导致store发生变化时，旧的state加上action得到新的state，container读取新的state决定自己怎么变化 </td> 
 <td> 只能从props获取数据，数据都是其父组件提供的 </td> 
 </tr> 
 <tr> 
 <td> 修改数据 </td> 
 <td> 向Redux派发actions </td> 
 <td> 只能是父组件给其props传递一个回调函数，component只是从props调用回调函数 </td> 
 </tr> 
 <tr> 
 <td> 实现方式 </td> 
 <td> 由react-redux生成 </td> 
 <td> 手写 </td> 
 </tr> 
 </tbody> 
</table>

补充：component与数据流向无关，只是负责显示，负责布局和样式，因此非常容易被复用，而container一般和业务紧密相连，因此不是那么容易被复用。