React状态管理：react-redux和redux-saga(适合由vue转到react的同学)

Posted 2023-03-15

参考技术A

注意：本文不会把所有知识点都写一遍，并不适合纯新手阅读

首先 Redux 是一种状态管理方案，本身和react并没有什么联系，redux也可以结合其他框架来用。
react-redux 是基于react的一种状态管理实现，他不像vuex那样直接内置在create-react-app里，需要自己去安装。

react-redux有三个重要概念，分别是：store，action，reducer。
1.store。store就是存储全局数据状态的仓库。像这样：

需要注意的是，state是 只读的 ，意味着我们不能 initState.xxx1 = "233" 这样去修改store里的数据。
其实，工作的项目里，仓库并不是放在store.js里，store.js里一般是做一些创建store，注册saga的操作，state一般是放在具体模块的reducer.js里（一个模块应该有action.js，reducer.js，saga.js三个文件）

2.action。
上文说了，state是只读的，所以我们只能通过派发action的方式修改store里的数据。
派发action这个说法我一直觉得很拗口，其实就是dispatch action的直译。
action包含两部分：type和payload。
type其实就是action的标识，一个常量的字符串，用来说明这个action是干嘛的，比如说 type:"GET_USERNAME" ，说明这个action是用来获取username的，payload就是参数了，就是调用api需要的参数。
注意：action是派发给store的。

3.reducer。
reducer接收一个state和action，返回一个state。
store在接收到action之后会把action和当前的state传给reducer，然后reducer根据action的type去判断执行什么样的操作，然后返回一个新的state给store，比如： return ...state,name:"接口获取到的username" 。

工作流程图如下：

这个流程还是蛮好懂的，接下来我们来说下reducer要注意的地方。（这里牵扯到我们为什么还要用redux-saga）
reducer必须是一个 纯函数
纯函数是指一个函数的返回结果只依赖于该函数传入的参数，而不能产生 副作用
副作用是指异步操作，DOM操作等...
好的，没明白是吧，说人话，reducer里是不能进行异步请求的！我们在工作中肯定会调用接口异步获取数据的，这样的话只靠react-redux是无法满足我们的需求的，而redux-saga就是来解决这个问题的。
如果你熟悉vuex，就知道vuex里有mutation和action，其中mutation提交更新数据的方法，只能是同步的，而action中就可以包含异步操作了，而且action提交的是mutation。
mutation和action的关系就近似于reducer和saga的关系：saga里调用接口获取到数据之后再提交action给reducer，最终返回新的state给store的还是reducer。

saga包含watch-saga函数和worker-saga函数，watch-saga用于监听系统派发出来的action，watch-saga一旦监听到了某个action就执行对应的worker-saga，worker-saga里进行异步操作（调用接口请求数据等），拿到数据之后派发第二个action给store，store再把state和action给reducer（至此就和无saga时的流程一样了）。
加入了saga，工作流程发生了变化：
我们注意到工作流中的action有两个，可以理解为第一个action是给watch-saga的，第二个action时异步操作完之后worker-saga给store的。

加入saga后的工作流程如下：