Redux

 1、对Redux的理解，主要解决什么问题？

🔰理解：

1️⃣：redux是一个专门用于做状态管理的JS库（不是react插件库）

2️⃣：它可以用在react，angular，vue等项目中，但基本与react配合使用。redux集中式管理react应用中多个组件共享的状态。Redux就是降低管理难度。

3️⃣：可以用redux的工作流程做出解释。

4️⃣：传统的状态管理方式是将状态放在组件内部，状态分部在各个组件中，使得状态难以追踪或者更新，Redux则是将状态统一放在单一的数据库中（既store）。

🔰主要解决的问题：

1️⃣：在React中，UI以组件的形式搭建，组件之间可以嵌套组合，但React中组件间通信的数据流是单向的，顶层组件可以通过props属性向下层组件传递数据，而下层组件不能向上层组件传递数据，兄弟组件之间同样不能。这样就可以使用redux，让其他组件可以随时共享到某个组件的状态。

2️⃣：一个组件需要改变另一个组件的状态（通信），这里可以采用view-model的原理解释。

2、Redux原理及其工作流程：

🔰Redux原理：

1️⃣：compose.js提供了从右到左的函数式编程，

compons函数式编程：compose是一个函数，该函数接收多个函数作为参数，并return一个新的函数。在将多个函数组合为一个函数时，compose函数会从右到左执行传进来的各个函数，也就是说最后一个传入的函数先会被执行，然后把结果传给前一个函数进行处理，直到第一个函数处理完成。

compose在redux中的应用主要体现在combineReducer和applyMiddleWare。 

✨：combineReducer函数使用compose函数将多个reducer函数组成一个根reducer函数，combineReducer接收一个对象，该对象的属性为各个子reducer函数，最终返回一个根reducer函数，

✨：applyMiddleWare函数使用compose函数来将多个中间件函数组合一起，最终返回一个加强版的store.dipatch方法。

2️⃣：createSore.js提供了作为生成唯一store的函数。

3️⃣：combineReducer.js提供了合并多个reducer的函数，保证store的唯一性

4️⃣：bindActionCreator.js可以让开发者不直接接触dipatch的前提下进行更改state的操作。

bindActionCreator是一个函数，接收两个参数(actionCreator，dipatch）

5️⃣：applyMiddleWare.js这个方法通过中间件来增强dipatch的功能 

🔰Redux工作流程：

工作流程图

 - const store = createStore(fn) 生成数据

- 使用Action Creators创建action

- 通过dipatch将action分发出去

- store对要使用的reducer进行绑定，然后将action分发到对应的reducer上

- 在reducer上进行相应的action操作并且返回结果给store

- 组件就可以通过store的getState（）进行获取操作返回而对方结果

3、Redux中异步的请求怎么处理

Redux的异步请求我们会借助redux的异步中间件进行异步处理。当前主流的异步中间件有两种redux-thunk、redux-saga。

1️⃣：使用redux-thunk

优点：redux-thunk的实现方式简单，体积小

缺点：

- 样板代码过多，通常一个请求需要大量的代码，而且很多都是重复性质的。

- 耦合严重：异步操作与redux的action耦合在一起，不方便管理。

- 功能孱弱：有一些实际开发常用的功能需要自己分装。

import {legacy_createStore as creatStore,applyMiddleware} from 'redux';
import shopCartReducer from 'reducer文件'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
const store = creatStore(shopCartReducer,applyMiddleware(thunk,logger))
export default store

6. 创建异步操作文件夹actionAsync.js
> redux-thunk的异步方法是异步回调函数
> 该回调函数说明如下：
> 第一个参数：dispatch对象
> 第二个参数：getState():获取仓库中的state的方法
```js
import getShopCarList from 'actionCreator地址'
`这里dipatch是原生的dipatch`
export const getShopCartListAsync= async(dispatch,getState)=>{
     const result =  await axios.get('路径地址').then()
     dipatch(getShopCarListCreator(result.data.data))
}

2️⃣：redux-saga：

优点：

- 异步解耦：异步操作被转移到单独saga.js中，不再是参杂在action.js或component.js中

- action摆脱thunk-function：dispatch的参数依然是一个纯粹的action

- 异常处理：受益于generator function的saga实现，代码异常/请求失败都可以直接通过try/catch语法直接捕获处理

- 功能强大：redux-saga提供了大量的saga辅助函数和Effect创建器供开发者使用，开发者无须封装或者简单封装即可使用。

- 灵活：redux-saga可以将多个saga可以串行/并行组合起来，形成一个非常使用的异步flow

- 易测试: 提供了各种case的测试方案，包括mock task，分支覆盖等等。

4、Redux如何实现属性传递，介绍下原理：

react-redux数据的传输：

view----> action---->reducer------->store------>view

点击事件的数据如何通过redux传到view上：

- 组件上的AddClick事件通过mapDispatchToProps把数据传到action

- action的Add传到reducer上

- reducer传到store上 const store = createStore（reducer）

- store再通过mapStateToProps映射传到组件的text上：State.text

5、Redux中间件是什么？接收几个参数？柯里化函数两端的参数具体是什么？

Redux的中间件提供的是位于action被发起之后，到达reducer之前的扩展点

原本的redux工作流程：

view-------(dipatch)---->action------->reducer------>store

使用中间件以后的工作流程：

view-------(dipatch)---->action---middleWare---->reducer------>store

再middleWare这一环节可以做一些副作用的操作，比如异步请求，打印日志等。

柯里化函数两端：

一个是middlewars，一个是store.dipatch