0
点赞
收藏
分享

微信扫一扫

React - 29 redux工程化


1.reducer的拆分和合并

在真正的项目中,我们一定会把状态和reducer的管理,按照模块化进行划分。

第一件事情: 按照模块,把reducer进行单独管理,每个模块都有自己的reducer; 最后,我们还要把所有的reducer进行合并,合并为一个,赋值给我们创建的store! !

reducer模板

React - 29 redux工程化_react

voteReducer.jsx

React - 29 redux工程化_react_02

personalReducer.js

React - 29 redux工程化_react_03

reducers/index.js

React - 29 redux工程化_react_04

store/index.js中的变化

React - 29 redux工程化_react_05

index.jsx不变

React - 29 redux工程化_react_06

Vote.jsx中的变化

React - 29 redux工程化_react_07

VoteMain.jsx中的变化

React - 29 redux工程化_react_08

VoteFooter.jsx中不变

派发的操作不需要改动,每一次派发后,都会去所有reducer进行逐一匹配T用派发的行为标识,和每个模块reducer中判断的行为标识进行比较];和谁匹配成功,就执行谁的逻辑! !

React - 29 redux工程化_react_09


2.派发行为标识宏管理

redux工程化的第二步

每一次dispalch派发的时候,都会去每个模块的reducer中找一遍,把所有和派发行为标识匹配的逻辑执行! !

可能存在的问题:团队协作开发的时候,因为开发的人多,最后很可能派发的行为标识会有冲突!!

所以我们一定要保证,不管哪个模块,哪个组件,我们派发的行为标识,必须是唯一的!!

基于"宏管理(统一管理),让所有派发的行为标识,唯性一!

store/action-types.js

React - 29 redux工程化_react_10

voteReducer.js中定义action type的修改

React - 29 redux工程化_react_11

personalReducer.js中定义action type的修改

React - 29 redux工程化_react_12

VoteFooter.jsx中派发时的修改

React - 29 redux工程化_react_13


3.actionCreator的创建

redux工程化第三步:把派发的行为对象,按照模块进行统一的管理


4.combineReducers的源码

举报

相关推荐

0 条评论