纯Redux原理分析

sumory 发布于2019-08-22 17:07 / 3507人阅读

摘要：调用链中最后一个会接受真实的的方法作为参数，并借此结束调用链。总结我们常用的一般是除了和之外的方法，那个理解明白了，对于以后出现的问题会有很大帮助，本文只是针对最基础的进行解析，之后有机会继续解析对他的封装

前言

虽然一直使用redux+react-redux，但是并没有真正去讲redux最基础的部分理解透彻，我觉得理解明白redux会对react-redux有一个透彻的理解。

其实，redux并不只可以用于react的，其实他可以用于任何地方，其实他的基础原理大概就是发布/订阅模式，此处主要对redux的源码进行一个深入的剖析

redux架构

redux一共有下边几部分构成：

* createStore
* combineReducers
* bindActionCreators
* applyMiddleware
* compose

其中，createStore分为如下几部分

* subscribe 订阅用于刷新页面的回调事件
* dispatch 触发动作
* getState 获取当前状态下的store
* replaceReducer 替换初始化传入的reducer
* Observer 相关，不太理解如何使用，暂时略过

store

其实，最简单的使用如下：

执行这个方法 createStore(reducer) 则会返回暴露上面几个方法的一个对象(赋值给store)

通过store.getState则可以获取当前store，此处注意，官方文档一直再说要在你定义的reducer当中定义一个default，来返回默认值，其实主要是页面需要初始化，在createStore.js可以看出最后他调用了

    dispatch({ type: ActionTypes.INIT })

action -> dispatch -> 更新store

当dispatch调用的时候(一般会在事件的回调函数中调用)，会去执行reducer(也就是你定义的处理函数)，通过你的处理函数，最后会返回一个新的store来供你更新redux缓存的store，从这块可以看出

    try {
      isDispatching = true
      // 通过给reducer回传当前状态和动作状态来更新store
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

render

前面提到的store还有一个方法，subscribe，这个方法会缓存传入的方法，便于dispatch的时候进行回调，从而更新试图。

其实，上面这些就是redux的原理了，具体可以看一下redux官方示例，有一个couter的例子，很容易理解: https://github.com/reactjs/re...

下面说一下其他几个点

compose

简单来说就是从右侧函数的返回值，作为左侧函数的参数
如 compose(fn, fn2)(...args) 等同于 fn(fn2(...args))

applyMiddleware

这个也是挺常用的一个方法

使用方法：

const store = applyMiddleware(Middle1, Middle2)(createStore)(reducer, initialState, enhancer)

这个方法主要做了一件事情

就是利用中间件来改变程序默认创建store，dispatch对整个过程做的处理，从而达到你自己想要的目的

最著名的一个组件就是redux-thunk,说这个方法前，先说说中间件应该怎么写，官网有这么一段描述

每个 middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数，并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接收 action 的新函数，这个函数可以直接调用 next(action)，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数，并借此结束调用链。所以，middleware 的函数签名是 ({ getState, dispatch }) => next => action。

下面看下redux-thunk非常简单，但是他的目的主要是为了再不引入第三方框架可以来操作异步事件，如

    store.dispatch((dispatch, setState) => {
        setTimeout(() => {
            dispatch({
                type: "EXAMPLES",
                payoad: "..."
            })
        }, 5);
    })

在redux-thunk内部做了这么件事情，就是如果action是函数则执行这个函数，给他传入dispatch, getState及其他参数，如果不是，直接调用next(action)，将控制权交到下一个中间件(中间件是从左到右执行顺序，最后控制权交到store.dispatch)，其实中间件就是在dispatch触发之前做了一些其他的事情来扩展redux功能

combineReducers

一共做了两件事情，首先将reducer进行检查是否为函数，同时检测reducer默认传入的store是否为undefined同时检测是否影响到redux默认明明空间的action type;然后就是返回一个组合reducer，里边处理下每次有值改变的时候，执行该函数(过程同单个reducer),内部其实就是去循环执行他的子reducer，子reducer根据action来进行store的修改，所以来说每个子reducer只要有处理相同type的函数，都会起到作用

注意：如果你的子reducer都不返回新对象，这个方法中会进行判断，则他也不返回新对象

bindActionCreators

可以将Action Creator(也就是生成action的函数)绑定到当前函数，执行后会生成action，然后需用dispatch(action)

没太看懂使用场景，有了解的欢迎留言，互相交流学习。

总结

我们常用的一般是除了bindActionCreators和compose之外的方法，那个理解明白了，对于以后出现的问题会有很大帮助，本文只是针对最基础的redux进行解析，之后有机会继续解析react-redux对他的封装

GPU云服务器云服务器 js跨域原理分析 Redux 语音降噪图形分析原理webrtc redux源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94873.html

Redux源码分析

摘要：在得到新的状态后，依次调用所有的监听器，通知状态的变更。执行完后，获得数组，它保存的对象是第二个箭头函数返回的匿名函数。部分源码利用这个属性，所有子组件均可以拿到这个属性。 Redux使用中的几个点： Redux三大设计原则 Create Store Redux middleware combineReducer Provider与Connect Redux流程梳理 Redux设计特...

renweihub 2019-08-22 15:26 评论0 收藏0
redux浅析

摘要：概念是一个状态管理容器使用可以更好的管理和监测组件之间需要通信的数据。参考源码参考链接 redux概念 redux是一个状态管理容器,使用redux可以更好的管理和监测组件之间需要通信的数据。 redux基本原则单一数据源在redux中,整个应用保持一个数据源,数据源是一个树形的结构状态只读状态只读意思是不能直接修改,需要通过dispatch action方式才可以,返回的是一...

galois 2019-08-22 16:40 评论0 收藏0
简单梳理Redux的源码与运行机制

摘要：然后循环调用中的更新函数，更新函数一般是我们的渲染函数，函数内部会调用来获取数据，所以页面会更新。前言前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的理解。 API概览看一下redux源码的index.js，看到了我们最...

刘东 2019-05-21 16:12 评论0 收藏0
简单梳理Redux的源码与运行机制

摘要：然后循环调用中的更新函数，更新函数一般是我们的渲染函数，函数内部会调用来获取数据，所以页面会更新。欢迎访问个人网站：https://www.neroht.com/ 前言前几天写了一篇react另一个状态管理工具Unstated的源码解析。开启了我的看源码之路。想一想用了好长时间的redux，但从没有深究过原理，遇到报错更是懵逼，所以就啃了一遍它的源码，写了这篇文章，分享我对于它的理...

betacat 2019-08-26 13:51 评论0 收藏0
Redux概念之二: Redux的三大原则

摘要：就是应用程序领域的状态，它是类型中的模型的设计的概念，这设计是由架构而来的，在原本的架构中是允许多个的结构，简化为只有单一个。的设计中是与中的相比，它们之间有一些类似的设计。 Redux里的强硬规则与设计不少，大部份都会与FP(函数式程序开发)、改进原本的Flux架构设计有关。Redux官网文档上的三大基本原则，主要是因为有可能怕初学者不理解Redux中的一些限制或设计，所以先写出来说...

dingda 2019-08-20 13:59 评论0 收藏0