React-Redux-thunk实现原理

简介: React-Redux-thunk实现原理

前言


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。




最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

目录
打赏
0
0
0
0
10
分享
相关文章
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
54 0
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
63 0
【React生态进阶】React与Redux完美结合:从原理到实践全面解析构建大规模应用的最佳策略与技巧分享!
【8月更文挑战第31天】React 与 Redux 的结合解决了复杂状态管理的问题,提升了应用性能。本文详细介绍了在 React 应用中引入 Redux 的原因、步骤及最佳实践,包括安装配置、状态管理、性能优化等多方面内容,并提供了代码示例,帮助你构建高性能、易维护的大规模应用。
112 0
【前端状态管理之道】React Context与Redux大对决:从原理到实践全面解析状态管理框架的选择与比较,帮你找到最适合的解决方案!
【8月更文挑战第31天】本文通过电子商务网站的具体案例,详细比较了React Context与Redux两种状态管理方案的优缺点。React Context作为轻量级API,适合小规模应用和少量状态共享,实现简单快捷。Redux则适用于大型复杂应用,具备严格的状态管理规则和丰富的社区支持,但配置较为繁琐。文章提供了两种方案的具体实现代码,并从适用场景、维护成本及社区支持三方面进行对比分析,帮助开发者根据项目需求选择最佳方案。
120 0
react redux 实现原理
【8月更文挑战第29天】react redux 实现原理
49 4
react路由实现原理
【8月更文挑战第11天】react路由实现原理
64 1
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
59 6
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等