搞懂redux一篇就够了

什么是redux

redux是一个应用数据流框架,主要解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法:action,store,reducer,工作流程是view调用store的dispatch方法接收action为参数传入store,通过action.type判断执行对应的reducer进行store操作,view通过store提供的getState获取最新的数据。

redux的设计思想与工作原理
  1. 针对dispatch和subscribe
  • 分别认识redux工作流中最为核心的dispatch动作以及redux自身独特的发布-订阅模式
  • dispatch这个动作刚好把action,reducer和store这三个主角给串联了起来
    dispatch这个动作
    1. 调用dispatch,入参为action对象。
    2. 前值校验
    3. 上锁:将isDispatching置为true(防止套娃)
    4. 调用reducer,计算新的state
    5. 解锁:将isDispatching置为false
    6. 触发订阅
    7. 返回action

禁止套娃用意:作为计算state专用函数redux在设计reducer时就强调了他必须是纯净的,不应该额外的脏操作。

  • subscribe并不是一个严格必要的方法,只有在需要监听状态的变化时我们才会调用它。
    1. redux默认了订阅对象就是’状态的变化(dispatch)‘这个事件。
    2. subscribe与redux主流程的结合
    3. 在store对象创建成功后,通过调用store.subscribe来注册监听
    4. 当dispatch.action发生时,redux会在reducer执行完毕后,将listeners数组中的监听函数逐个执行。
    5. 工作流:调用subscribe,入参是一个函数 - 前置校验 - 调用ensureCANMutateNextLieners确保nextListeners与currentListeners不指向同一个引用 - 注册监听函数,将入参listener函数推入nextListeners数组中 - 返回取消订阅当前listener的方法(unsubscribe)
    6. nextListeners注册监听,触发订阅,取消订阅,取消监听,currentListeners数组用于确保监听函数执行过程的稳定性
redux中间件
  1. 中间件的引用对redux工作流的改变。
  • redux源码中只有同步操作,如果想要redux引入异步数据流需要使用中间件来增强createStore(redux-thunk).
  • action - middleware - dispatch - reducer - nextState
  • 中间件的执行时机是action被分发之后,reducer触发之前
  • 执行前提:applyMiddleware将会对dispatch函数进行改写使dispatch在触发reducer之前会首先执行对redux中间件的链式调用。
  • applyMiddleware是enhancer的一种,而enhancer的意思是增强器,它增强的正是createStore的能力。
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值