浅谈在React中使用Redux数据流(三)

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。

 

container

component

目的

如何工作(如何获取数据,状态如何更新)

如何显示(样式,布局)

是否在Redux数据流中

是,Redux知道container存在,因为reducer根据用户的action决定如何响应后,就是作用于container上的

否,Redux并不知道component存在

读取数据

从Redux获取state,即当行为导致store发生变化时,旧的state加上action得到新的state,container读取新的state决定自己怎么变化

只能从props获取数据,数据都是其父组件提供的

修改数据

向Redux派发actions

只能是父组件给其props传递一个回调函数,component只是从props调用回调函数

实现方式

由react-redux生成

手写

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

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值