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一般和业务紧密相连,因此不是那么容易被复用。