13.中间件和高阶组件

中间件

通常情况下，action只是一个对象，不能包含异步操作，这导致了很多创建action的逻辑只能写在组件中，代码量较多也不便于复用，同时对该部分代码测试的时候也比较困难，组件的业务逻辑也不清晰，使用中间件了之后，可以通过actionCreator异步编写action，这样代码就会拆分到actionCreator中，可维护性大大提高，可以方便于测试、复用，同时actionCreator还集成了异步操作中不同的action派发机制，减少编码过程中的代码量。

通过redux-thunk | redux-promise | redux-sega等中间件解决希望在redux中执行异步操作的需求

redux-thunk的使用

1.安装redux-thunk中间件

yarn add redux-thunk

2. 在redux的store/index.js进行设置

import {createStore,applhyMiddleware} from "redux"
import reducer from "./reducer"
import thunk from "redux-thunk"

const store = createStore(reducer,applyMiddleware(thunk))

export default store

3. 在actionCreators中进行设置

redux-thunk的原理：https://www.jianshu.com/p/e1acf613adf6

创建action —> 中间件 —> 派发给reducer处理，action到reducer中间会经历中间件，我们可以在中间件中对数据进行操作

actionCreator如果返回的是对象，内部就会调用next(),自动的调用dispatch派发给下一个中间件 | render 来处理

actionCreator如果返回的是一个函数，在函数内部做异步操作–> 参数是dispatch扔给你的，让你在进行异步操作的合适时机进行手动派发

import {
   CHANGE_NUMBER,ADD} from "./actionType"
export default {
   
  changeNumber(id,value){
   
    let action = {
   
      type