前言
React-Redux-Thunk是一个用于处理Redux异步操作的中间件，它的实现原理基于Redux middleware的概念。它的核心思想是允许action creators返回函数而不是普通的action对象。
本篇的内容也是基于上次实现 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。
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
