redux 中间件 redux-thunk

什么是中间件？ 中间件指的是redux的，不是react的。中间指的是action 跟store之间，也就是对dispacth方的封装，最原始的是直接将接受过来的对象直接传递给store，但是如果传递的是一个函数的话，就不会将这直接传递给store，而是先执行这个函数。

常见的中间有
redux-devtools-extension ，`redux-thunk,redux-saga,redux-log等

一 、redux-thunk

redux-thunk 的引出: 组件中引入过多的异步请求，会使得组件变得异常的臃肿，为了解决这个我问题，redux-thunk 中间件 将异步请求放在action 里面进行实现。

异步函数放在组件的生命周期里面，会使得异步组件更加的难易维护，也很方便自动化测试

1： 安装：
yarn add redux-thunk

redux-thunk 是作用于创建 store的时候

2: 问题：一般我本地开发需要配置redux-devtools-extension，文档有对应的解决办法，参考在线文档地址

// store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer'

// typeof window === 'object' 判断是不是浏览器环境 
const composeEnhancers =  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ }) : compose

const enhancer = composeEnhancers(
   applyMiddleware(thunk)
);

const store  =  createStore( reducer, enhancer )
export default store

3：使用：
普通的 actionCreater 返回的是一个函数，return的是一个对象

export const getHandleInput_action = (value) =>({
        type:CHANGE_INPUT_VALUE,
        value  
})

但是使用redux-thunk的时候return出去的可以是一个函数，函数可以直接接受一个参数dispatch .

  ./store/actionCreator.js

export const getInitData = () =>{
    return (dispatch)=>{
        axios.get('/test.json')
        .then((res)=>{
            let actions = {
                type:'init_state_sync',
                value: res.data.list
            }
            dispatch(actions)
        })
    }
}

使用redux-thunk 的时候 store的dispatch就也可以发送一个函数给store了，并且会自动执行以下这个函数

  import {getInitData} from './store/actionCreator'
  componentDidMount(){
       store.dispatch( getInitData() )
    }