REACT-Redux,异步SAGA以及THUNK的小理解

天道无情人间有情，2020年的开端作为小白 逆流而上，战在学习上，希望有照一日小白‘’板‘’也能成为菜鸟

对Redux的理解

：
它是一个仓库，里面存放着初始数据，然后这个数据可以各个组件进行调用，以及在当前组件下进行修改，而不影响到这个初始数据；还有就是单独使用传值，值只是传给了Hoc这个高阶组件，所以它是需要<Com {…this.props} /> 调用组件里面的三个方法，但是这个调用方法是通过Hoc来实现的，这种应该是叫属性代理；

还有一种就是
反向继承：通过你使用高阶组件，把参数传递回来进行判断，通过判断语句进行反向操作

它有三种方法可以实现数据传参：

1. 通过sessionStorage传值
2. 通过state传值
3. store仓库传值
4. 修改数据

Redux介绍：
状态管理工具 npm I redux –s
三大原则：
单一数据源
State是只读的
使用纯函数来执行修改

ComponentDidUpdata（只能监听组件里面的数据改变，监听不了仓库store的数据变化）

Store

1. getState（） 获取状态
2. dispatch（｛type，playload｝）抛发动作给reducer
3. subscribe监听store里的数据变化

三种重要操作：
存数据；
取数据；
改数据： 组件里 store.dispatch(action（actionCreator）) ---->reducer(type,action)
—>复本，修改,返回–》组件里通过store.getState() 取最新的值（subscribe)

单向数据流:

组件里 store.dispatch(action（actionCreator）) ---->reducer(type,action)
—>复本，修改,返回–》组件里通过store.getState() 取最新的值（subscribe)

分模块：
UI组件（只负责渲染）
容器组件（和store打交道）

1） store.dispatch(动作)
action 是一定含有type的一个对象 ,通过去人type 调用action进行修改
2) 动作发给了 reducer 第二个参数 action
action 一定有type ,还可能接收一些其他参数
3) 根据type修改数据
a. 做 state 的复本
b. 修改state的复本对象
c. 返回新的state
2) store
store getState dispatch({type:‘XXX’,key:value…})
3) action对象的type值 千万不要重复
var reducer = (state = initState,action)=>{
// if(action.type === “REC”){
// // var newState ={…state}; //做复本 浅拷贝
// // newState.path=action.path; //修改值
// // return newState; //返回新状态
// return {…state,path:action.path};
// }
// return state

关于THUNK以及SAGA的一些理解

共同点：都是通过组件传入props获取数据列表进行渲染，使用fetch必须有then（）
Redux-thunk：redux的中间件，可以处理简单的异步数据渲染，但是操作步骤比较复杂因为在组件里面一次性写好了获取的方法，有时候复杂的话会看不懂：

Thunk可以直接在动作文件里面直接写好获取地址:

Redux-saga

：redux的中间件，可以处理复杂的异步数据渲染，但是操作步骤比较简单，不过需要额外插入saga：
*

fetch*：

接收地址 then（res）获取里面的数据 返回res。json这个数据，
然后再添加到type里面，渲染时候type相同就可以执行该数据了，

yield

：跟return功能类似，但又不一样；是ES6新增，选择性操作的意思，
相当于先执行第一个yield后，如果有next()这个代码，就执行下一个yield，无就不执行下一个yield

在STORE里面：

在SAGA.js里面：

在type动作状态里面：

takeEvery
takeEvery就像一个流水线的洗碗工，过来一个脏盘子就直接执行后面的洗碗函数，一旦你请了这个洗碗工他会一直执行这个工作，不会停止接盘子的监听过程和触发洗盘子函数

只要有个type相同即可通过渲染数据