React-Redux-thunk实现原理

本篇的内容也是基于上次实现 Redux 实现原理的文章进行改造的，在 redux-thunk 中，如果通过 dispatch 派发的任务是一个对象, 那么就立即执行 reducer, 如果通过 dispatch 派发的任务是一个函数, 那么就执行这个函数，实现这一步该如何实现呢，其实呢非常的简单。

更改 index.js：

const redux = require('redux');

const ADD_COUNT = 'ADD_COUNT';
const SUB_COUNT = 'SUB_COUNT';

// 定义一个状态
let initialState = {
    count: 0
};

// 利用store来保存状态（state）
const store = redux.createStore(reducer);

// 利用action来修改状态
const addAction = {type: ADD_COUNT, num: 1}
const subAction = {type: SUB_COUNT, num: 1};
const getUserInfo = (dispatch, getState) => {
    setTimeout(() => {
        console.log('获取到了异步数据');
        dispatch(addAction);
    }, 3000);
};

// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    console.log('reducer被执行了');
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num};
        case SUB_COUNT:
            return {count: state.count - action.num};
        default:
            return state;
    }
}

function thunkDispatch(action) {
    console.log('执行reducer之前做的事情');
    if (typeof action === 'function') {
        action(store.dispatch, store.getState);
        return;
    }
    store.dispatch(action);
}

thunkDispatch(getUserInfo);

运行效果如下：

如上的实现代码与官方的还是有些差异的因为官方是通过 dispatch 来进行派发任务的，而我们并不是所以下方我将进一步的进行完善一下，那么更改的具体内容呢就是 thunkDispatch：

function thunkDispatch(store) {
    const storeDispatch = store.dispatch;
    const storeGteState = store.getState;

    function myDispatch(action) {
        console.log('执行reducer之前做的事情');
        if (typeof action === 'function') {
            action(storeDispatch, storeGteState);
            return;
        }
        storeDispatch(action);
    }

    // 将官方的dispatch函数修改为我们自定义的dispatch函数
    store.dispatch = myDispatch;
}

测试：

// 调用的实际是我们自定义的dispatch函数
thunkDispatch(store);
store.dispatch(getUserInfo);

好了到此为止，现在我们的实现代码就与官方的一模一样了，end。