Redux中间件的引用

此博客纯粹做学习纪录使用，如过阅读时有不太明白的地方，请自行翻阅官方文档！谢谢

这个是官方的详细说明：https://github.com/zalmoxisus/redux-devtools-extension

不得不说Rudex中间件的使用为我们创建了极大的便利，最直观的感受是他把业务逻辑进行封装，让整体逻辑进行封装逻辑更加清晰!更大的好处是我们在以后的写自动化测试的时候会很舒服！

我们先来看一张图！

相信大家都已经知道了redux 的实现的基础知识了，那么我们就知道store的dispatch发送的是一个action，如果我们不使用中间件的话，那么这个action只能是一个对象，但是我们引用中间件后我们就对store的dispatch的方法进行了升级，可以发送除对象以外其他的内容！比如说thunk中间件，它的作用就可以就可以简单理解为允许action是一个函数，当store检测到我们传递的是一个函数的时候，它就会帮我们自动执行action这个函数，从而实现了业务逻辑的封装！

首先是怎么引入中间件呢？在此我用thunk这个中间件来举例！

首先我们要在命令行中执行 

yarn add redux-thunk

然后引用，更加具体的步骤在官方文档中有明确说明！

./store/index.js

import { createStore,applyMiddleware ,compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
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;

./store/actionCreators.js

export const getTodoList = () => {
    //在执行ajax异步请求,此处返回的是一个函数，并且这个函数会自动接收dispatch的方法
    return(dispatch) => {
        axios.get('/list.json').then((res) =>{
            const data = res.data;
            const action = getInitListAction(data);
            dispatch(action);
        })
    }
}

./Todolist.js

    componentDidMount(){
        const action = getTodoList();
        store.dispatch(action);//action是一个方法，在thunk中间件的作用下，store会自动检测执行
    }

最后谢谢大家的观看，感谢IMOOC的DellLee老师的图和代码！