登录  /  注册
首页 > web前端 > js教程 > 正文

如何理解 redux

一个新手
发布: 2017-09-28 09:05:04
原创
1548人浏览过

   redux原理

  某公司有物流(actionType)、电商(actionType)、广告(actionType)3块业务,在公司财务系统(state)统一记录着三块业务分别赚取到的资金。某天,电商业务在公司电商平台销售了价值100w的商品(action),赚取到的资金通过发票(dispatch)的形式送到业务的财务部门,财务部门通过自己业务块,计算赚取到的利润(reducer),再更新到财务系统(state)。

  核心原理: 通过某个事件action把结果通过dispatch发送到reducer,在reducer中,根据不同的actionType对数据做不同的业务处理,然后把最后的结果更新到state树中。

   由于的几位老板对公司的资金盯着很紧,要时刻关注资金的变化,于是,就设置了当资金有变动事件(subscribe),就发短信告诉他(listener)。

  原理:redux通过内置了一个listeners数组,允许外部订阅state数据变动事件,当state树种的数据发生变化,就会通知所有的监听事件。

   API 讲解


function createStore(reducer, preloadedState, enhancer)
登录后复制

  createStore方法中,初始化了整个redux环境。preloadedState作为state树的初始值。此方法返回了redux开放的接口,操作redux的state,只能通过返回来的api去操作。

  createStore返回返回来的api:


 return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }
登录后复制

  store.getState: 返回当前redux维护的state对象;

  store.subscribe: 可以通过此接口注册订阅事件,即当redux的state被访问时(不管有没有修改到state的数据),redux就会遍历所有已注册的事件。


function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }
登录后复制

  store.dispatch: 在事件action运行后,通过dispatch把结果推送到reducer中。action的结果必须为普通的js对象,并且必须包含一个type属性,在reducer中可以根据type去对数据做不同的业务处理,然后更新到相应的state。

  在reducer之后,无论数据有没有发生变化,都会遍历所有的监听事件。


function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }
登录后复制

  整个单页面应用仅需调用1次createStore方法,然后确保初始化后的对象全局可用,这样才能达到通过redux来统一管理数据。

以上就是如何理解 redux的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号