美文网首页
Redux 源码解析

Redux 源码解析

作者: bowen_wu | 来源:发表于2021-04-15 19:48 被阅读0次

概述

Redux 是 JavaScript 状态容器，提供可预测化的状态管理方案。其三大原则为：

  • 单一数据源 => 整个应用的 state 被储存在一颗 object tree 中，并且这个 object tree只存在于唯一一个 store 中
  • state 是只读的 => 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
  • 使用纯函数来执行修改 => 为了描述 action 如何改变 state tree，需要编写 reducers

纯函数： 即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用

Redux 的核心：

  • store => store 是由 Redux 提供的 createStore 生成的，通过 createStore 方法创建的 store 是一个对象
  • dispatch => 调度 state 的更新
  • reducer => 处理 state 的更新。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。指定了应用状态的变化如何响应 actions 并发送到 store 的。
  • action => action 是把数据从应用传到 store 的有效载荷，它是 store 数据的唯一来源。action 是一个对象，其中包括 type 和 payload 属性。描述变化
  • Provider => 全局注册，在 <Provider></Provider> 内的组件都可拿到 state
  • connect => 连接组件和 store

自我实现

代码，这部分主要参照了这个系列的相关文章。相关的逻辑可以参照 commit message

官方文档

  1. 变化 vs 异步
  2. React 把处理 state 中数据的问题留给了开发者，Redux -> 处理 state 中的数据
  3. Redux 试图让 state 的变化变得可预测
  4. reducer 合成 -> 每个 reducer 只负责管理全局 state 中它负责的一部分。每个 reducer 的 state 参数都不同，分别对应它管理的那部分 state 数据。开发一个函数作为主 reducer，它调用多个子 reducer 分别处理 state 中的一部分数据，然后再把这些数据合成一个大的单一对象。
  5. combineReducers API
  6. store 职责：
    • 维持应用的 state
    • 提供 getState() 方法获取 state
    • 提供 dispatch(action) 方法更新 state
    • 通过 subscribe(listener) 注册监视器
    • 通过 subscribe(listener) 返回的函数注销监听器

源码

类型

  • export type Reducer<S = any, A extends Action = AnyAction> = (state: S | undefined, action: A) => S;

createStore

  1. 类型：Function

  2. 参数：

    • reducer<Reducer>
    • 【可选】preloadedState<PreloadedState<S>> => 初始化 state
    • 【可选】enhancer<StoreEnhancer<Ext, StateExt>> => 增强器，用来扩展store的功能

  3. 返回值：store<Store<ExtendState<S, StateExt>, A, StateExt, Ext> & Ext>

源码分析

源码
  • 1 - 10：preloadedState 和 enhancer 不能同时为 Function
  • 12 - 15：如果 preloadedState 为 Function 但是 enhancer 为 undefined 那么将 preloadedState 赋给 enhancer，并且 preloadedState 置为 undefined
源码
  • 1 - 10：如果 enhancer 不为 undefined，那么 enhancer 必须为 Function，如果是 Function 直接返回 enhancer(createStore)(reducer, preloadedState)。这个在 applyMiddleware 时具体讲解
// TODO: 使用一个 enhancer 作为例子
  • 12 - 14： 如果 reducer 不是 Function 则抛错
源码
  • currentReducer => 传入的 reducer
  • currentState => preloadedState => undefined | 用户传入的 state
  • currentListeners: (() => void)[] | null => [] => 存储更新函数的数组
  • nextListeners => [] => 下次dispatch将会触发的更新函数数组
  • isDispatching<boolean> => Lock，当前是否在 dispatch
源码

定义 ensureCanMutateNextListeners、getState、subscribe、dispatch、replaceReducer 和 observable 函数

源码
  • 2：dispatch 一个 ActionTypes.INIT 的 action => 使得每个 reducer 返回初始 state
  • 4 - 11： 创建 store 变量并返回
dispatch
dispatch
  • 2 - 4：判断 action 是否是纯粹的对象。即不是 Array | Function | null，isPlainObject 定义
  • 6 - 8： action 必须有 type
  • 10 - 12：如果当前正在 dispatch 则不能 dispatch => 不可以同时 dispatch 两个 action
  • 14 - 19：执行 currentReducer，传入 currentState 和 action
  • 21 - 25：将 nextListeners 赋给 currentListeners 和 listeners，之后循环遍历执行 listener
    最终 return action
getState
getState

getState 方法比较简单，就是 return currentState

subscribe
subscribe
  • 2 - 8：如果 listener 不是 Function 或者 isDispatching === true 抛错
  • 10：定义🔐 isSubscribed => 是否已经订阅
  • 12: 执行 ensureCanMutateNextListeners 函数
  • 13：将 listener 推入 nextListeners
  • 15：return unsubscribe 函数
  • 16 - 20：如果 isSubscribed === false 直接返回， 如果 isDispatching === true 抛错
  • 22：关🔐
  • 24：执行 ensureCanMutateNextListeners 函数
  • 25 - 27：在 nextListeners 中删除 listener 函数，并将 currentListeners 置为 null
ensureCanMutateNextListeners
ensureCanMutateNextListeners

对 currentListeners 做了浅拷贝以便于可以在 dispatch 的时候使用 nextListeners 作为临时的 listener。这样可以防止使用者在 dispatch 的时候调用 subscribe/unsubscribe 出现 bug。避免相互影响

combineReducers

  1. 类型：Function
  2. 参数：reducers
  3. 返回值：Function
  4. 使用 combineReducers 例子

源码分析

源码
  • 2 - 13：将用户传入的 reducers 做一个 shallow copy，并且剔除不是 Function 的 reducer。
    • finalReducers 为有效的 reducer
    • finalReducerKeys => 有效 reducer 的 key
  • 15 - 20：执行 assertReducerShape 函数，如有 Error 将 Error 赋值给 shapeAssertionError
  • 22：返回 combination 函数
assertReducerShape
assertReducerShape

遍历给到的 reducer

  • 如果在初始化 action 时返回 undefined，抛错
  • 如果执行一个随机 action 时返回 undefined，抛错
combination
combination
  • 2 - 4：如果 assertReducerShape 函数执行时出错，则抛出错误
  • 6 - 7： 定义 hasChanged 🔐 和 nextState 变量
  • 8 - 19：遍历 finalReducerKeys 数组，previousStateForKey = state[key]，nextStateForKey = reducer(previousStateForKey, action)，如果 nextStateForKey 为 undefined 抛错。将 reducer 计算出来的 state 存入 nextState 中。并且判断 previousStateForKey 和 nextStateForKey 是否改变了
  • 20 - 21：判断 finalReducerKeys 和传入 state 的 key 的 length 是否改变。最终 return hasChanged ? nextState : state

compose

  1. 类型：Function
  2. 参数：Function[]
  3. 返回值：Function
  4. 使用 compose 例子

源码分析

compose
  • 2 - 5：如果数组为空，返回一个空函数
  • 7 - 9：如果数组的 length 为1，则返回第一个函数
  • 11：对函数数组进行 reduce 操作 
    compose(increase, square, add) // (...args) => increase(sqpare(add(...args)))

注意：Array.reduce() 的使用 => 回调函数第一次执行时，accumulator 和 currentValue 取值有两种情况：如果调用 reduce() 时提供了 initialValue，accumulator 取值 initialValue，currentValue 取数组中的第一个值；如果没有提供 initialValue，那么 accumulator 取数组中第一个值，currentValue 取数组中的第二个值

Lodash compose -> flow

Lodash compose

applyMiddleware

  1. 类型：Function
  2. 参数：Middleware[]
  3. 返回值：Function
  4. Middleware：({getState}) => next => dispatch => ({getState}) => dispatch => action => any

applyMiddleware的功能：改造dispatch函数，产生真假dispatch，而中间件就是运行在假真（dispatchAndLog假和next真）之间的代码。

源码分析

applyMiddleware

applyMiddleware 函数，直接返回一个函数，我们直接看这个函数即可。这个函数的结构是 (createStore) => (reducer, preloadedState?) => store

  • 6：执行 createStore 函数，获取 store
  • 7 - 12：定义 dispatch 函数
  • 14 - 17：定义 middlewareAPI 对象，这里 middlewareAPI 只有两个属性，getState 和 dispatch
  • 18：将用户传入的 middleware[] 依次执行，并将 middlewareAPI 作为参数传给各个 Middleware，Middleware 的例子如下 
    function logger({ getState }) {
  return next => action => {
    console.log('will dispatch', action)

    const returnValue = next(action)

    console.log('state after dispatch', getState())

    return returnValue
  }
}
    此时 chain 的值为 Middleware 返回值的数组 
    // chain => [middleware1, middleware2, middleware3]
next => action => {
    console.log('will dispatch', action)

    const returnValue = next(action)

    console.log('state after dispatch', getState())

    return returnValue
}
  • 19： dispatch = compose<typeof dispatch>(...chain)(store.dispatch)。使用 compose 函数，此时 Middleware 中的 next === store.dispatch
  • 21 - 24：return store，这里的 dispatch 是 19 行的 dispatch

之后看一下 Middleware 使用场所。是作为 applyMiddleware 的参数使用。applyMiddleware 做为 createStore 的第三个参数传入 createStore。

createStore enhancer

此时的 enhancer === applyMiddleware，之后在 createStore 里面直接执行
applyMiddleware，将 createStore 和 reducer + preloadedState 传入 applyMiddleware，即在 applyMiddleware 代码中的第 21 行 - 第 24 行的返回值即为 createStore 的返回值

applyMiddleware 做了什么

  1. 执行传入的 Middleware，并将 state 作为参数传入 Middleware
  2. 更新 dispatch，这个更新后的 dispatch 是用户传入的（强化的 dispatch），例如上述的 logger 例子 
    action => {
    console.log('will dispatch', action)

    // 此处的 next === dispatch === store.dispatch === createStore(reducer, preloadedState).dispatch
    const returnValue = next(action)

    console.log('state after dispatch', getState())

    return returnValue
}

注意点

  1. enhancer store 的增强器。enhancer 是一个高阶函数，返回值是一个经过包装的强化的 store。applyMiddleware 就是一个 enhancer

疑问

Redux 做了什么？

  1. 存储 state
  2. 更删改查 state => 可以理解为 state 的变化
  3. 触发更新

middleware 的执行顺序

Redux 的中间件模型类似于 koa。在 next 前面以及 next，由外向内依次执行。当最里面的 next 执行完成之后，next 后面的代码会由内向外执行。非常类似于 Koa 的洋葱中间件模型。

dispatch 之后，Redux 是如何去处理的？

  1. 执行 reducer 更新 currentState
  2. 依次执行 listener 函数

state 中的数据被修改之后，订阅者们如何去收到更新后的数据？

在 subscribe 中通过 store.getState() 获取数据

applyMiddleware 中 dispatch 为何赋值两次

第一次赋值表示 => 在 Middleware 创建时，不能进行 dispatch
第二次赋值表示 => 此 dispatch 是一个强化后的 dispatch

middlewareAPI 中的 dispatch 什么时候会被调用

注意使用场景

function logger({ getState, dispatch }) {
  // 此时的 dispatch 为抛错函数，即第一次赋值的函数，即第 7 - 12 行
  return next => {
    // 此处的 next === store.dispatch
    // 此时的 dispatch === 下面 return 的函数
    return action => {
        console.log('will dispatch', action)

        const returnValue = next(action)

        console.log('state after dispatch', getState())

        return returnValue
      }
  }
}

middlewareAPI 中的 dispatch 为啥要用匿名函数包裹

let dispatch = () => console.log('Error!');
const obj = {
  name: 'dispatch',
  dispatch,
}
obj.dispatch();

dispatch = () => console.log('Ready!');
obj.dispatch();

上述的 log 是什么结果呢？


result 
let dispatch = () => console.log('Error!');
const obj = {
  name: 'dispatch',
  dispatch: (...args) => dispatch(...args),
}
obj.dispatch();

dispatch = () => console.log('Ready!');
obj.dispatch();

上述的 log 是什么结果呢？


result

store.subscribe 为啥要有🔐 isDispatching

dispatch 执行时候会循环执行更新函数，要保证 listeners 数组在这时候不能被改变

以下代码作用

createStore

答：有了这一层判断，我们就可以这样传：createStore(reducer, initialState, enhancer) 或者这样：createStore(reducer, enhancer)，其中 enhancer 还会是 enhancer。

Redux 优势

  1. 纯函数，做测试的时候 easy

相关文章

  • Redux 源码初探

    标签： 源码解析,前端 Redux 1. Reducer combineReducers将多个reducer 合并...

  • redux源码解析

    上周六参加了一个公司的面试，因为是很长时间以来的第一次面试，发挥的并不是很好，有两个下来一想就明白的问题在当时却卡...

  • Redux源码解析

    写在开始 本篇主要结合react-native 使用redux的过程，说明使用redux的方法和原理，揭秘Redu...

  • redux源码解析

    核心功能 getState 获取当前的state dispatch 派发action以更新状态 subscribe...

  • Redux 源码解析

    概述 Redux 是 JavaScript 状态容器，提供可预测化的状态管理方案。其三大原则为： 单一数据源 =>...

  • 【react】Redux源码解析

    Redux 源码 let createStore = (reducer) => { let state; //...

  • redux源码阅读——applyMiddleware

    redux源码——applyMiddleware 相关源码展示 applyMiddleware源码 compose...

  • redux源码解析之applyMiddleware

    前言 项目中一直使用redux来进行状态管理，对于redux中间件传递这一块一直不是很理解，只懂得使用不懂得原理，...

  • Redux+ReactRedux源码解析

    export const ActionTypes = {INIT:'@@redux/INIT'} // 生成一个s...

  • redux-saga 源码解析

    本篇解读是将 api 作为入口进行解读的，因为 redux-saga 的 api 过多尤其是 effect 创建器...

网友评论

      本文标题：Redux 源码解析

      本文链接：https://www.haomeiwen.com/subject/fulrhltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Redux 源码解析|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！