Reudx 源码解析

快手社交技术团队2024-02-02 11:16

什么是状态？

状态（State）是指应用程序在某个时刻的内部状态。状态可以包括应用程序的当前数据、用户输入、用户操作等。状态通常由一个对象或变量来表示，它可以帮助开发人员管理应用程序的行为和响应用户输入的变化。例如，在处理用户输入时，开发人员需要将用户输入的状态转换为应用程序可以使用的格式。

为什么使用Redux?

现实问题

随着前端应用开发日趋复杂，需要管理的状态越来越多，状态变化越来越频繁，我们很容易就对这些状态何时发生、为什么发生以及怎么发生的失去控制；组件之间的通信和协调也变得困难。尤其是跨越多个层级的组件。因此，如何更好地进行状态管理是理我们需要思考的问题。

状态管理库

为了应对日益复杂的 State 状态，行业内提出不同的解决方案，目前比较常见的状态管理库有redux、zustand、xstate、mobx、jotai、recoil等。从 npm trends 看各个状态管理库近一年的下载量趋势：

可以看到 Redux 作为 React 状态管理的老大哥，下载量上依然瑶瑶领先其他小兄弟。那么Redux有什么魔力使得自己成为绝大多数开发者状态管理库的首选。

Redux的优点

  • 可预测性，严格遵循单向数据流，所有的状态变更都通过分发 action，使得状态变更变得可预测，容易理解和调试。可预测性是 Reudx 设计的最大亮点；
  • 繁荣的社区，拥有庞大的社区和成熟的支持，以及大量的教程、实例；
  • 可扩展性高，中间件模式提供了灵活的扩展能力，让你可以随心所欲的武装你的 dispatch；
  • 良好的开发体验，拥有成熟的开发调试工具 redux devtools；

Redux能带来什么

Redux 帮你管理"全局"状态，提供的模式使你更容易理解应用程序中的状态何时、何地、为什么、state如何被更新，以及当这些更改发生时你的应用程序逻辑将如何更新。指导你编写可预测和可测试的代码。

如果我们的页面特别复杂，如上左图所示，存在父子组件，子父组件，兄弟组件之间的通信，数据也存在正向，单向，跨层的数据流动，在未使用任何状态管理库之前，维护起来就会非常困难；在使用 Redux 状态管理库之后，如上右图所示，所有组件间的通信都通过分发 action，一次一个 action，针对应用内唯一的 store 进行更改，然后再通过订阅更新组件的UI，所有的数据流向都是单向的，确保整个流程更加清晰。

认识Flux

Redux 基于 Flux 单向数据流的思想，在深入了解 Redux 之前我们有必要先了解下 Flux。

Flux 是由 Facebook 提出的一种应用架构模式，作为主流的JavaScript MVC模式的替代品被开发。传统MVC模式中多采用双向数据绑定，视图的改变会更新相应的模型，模型的更改也会更新相应的视图，模型（model）、视图（view）和控制器（controller）之间的数据流可能会难以理解追寻。Flux试图解决状态的不可预测性，以及模型与视图紧密耦合的架构的脆弱性。废弃了双向数据绑定模型，转而采用单项数据流。Flux要求对状态的所有修改遵循单一的路径，而不允许每个视图与对应的模型进行交互。

在 Flux 架构中，一个应用将被拆分为以下 4 个部分

  • View：用户界面。

  • Action：可以理解为视图层发出的"消息"，它会触发应用状态的改变

  • Dispatcher：派发器，负责对 action 进行分发；

  • Store：数据层，存储应用状态的"仓库"，此外还会定义修改状态的逻辑。store 的变化最终会映射到 view 层上去

Flux工作流如下图所示：

用户与 View 之间产生交互，通过 View 发起一个 action，Dispatcher 会把这个 Action 派发给 Store，通知 Store 进行相应的状态更新。Store 状态更新完成后，会进一步通知 View 去更新界面。

Redux 的介绍

Redux 是JavaScrip应用程序的可预测状态的容器。作为React的状态管理层，主要目标是为应用程序中的数据带来一致性与可预测性。Redux将状态管理的职责划分为一下几个独立的单元：

  • Store：将应用程序的所有状态都存储在单个对象中（对象树）

  • Action：描述实现的对象，只能使用action更新store

  • Reducer：指定了如何转换应用程序的状态，它接收store中的当前状态和一个action，然后返回更新后的下一个状态

Redux工作流如下图所示：

三大原则

Redux中的状态由单一的可信数据源（single source of truth）表示，是只读的，并且只能用纯函数进行修改。这其中蕴含了Redux的三大原则，即

  • 单一数据源：整个应用的 state 被存储在一个对象树中，并且只存在于唯一的 store 中；
  • 状态是只读的：不能直接去修改 state，只能通过触发 action 来返回一个新的 state；
  • 改变由纯函数进行：要使用纯函数来修改 state；

Redux与Flux的区别

Redux 是一种基于 Flux 思想的实现方式，它在Flux基础上进行了改进。Redux采用了单向数据流的概念，与Flux最大的区别在于 Redux 只有一个 Store，而 Flux 允许多个 Store 存在。相较于Flux，Redux的单一Store更加清晰和易于管理。在Flux中，会有多个Store用于存储应用数据，并在Store中执行更新逻辑，当Store发生变化时，再通知controller-view来更新数据。而Redux将这些Store整合成一个完整的Store，并且可以通过这个Store推导出整个应用的State。

另外，Redux的更新逻辑不再放在Store中执行，而是放在Reducer中。单一Store带来的好处是，所有的数据结果都集中在一处，操作起来更加便利。只要将它传递给最外层组件，内层组件就不需要维持自己的State，只需要通过props从父级组件传递下来即可。这使得子组件变得异常简单。

Redux使用示例

我们先来看下Redux的示例代码

javascript 复制代码 
import { createStore } from 'redux';
// store 至少需要一个 reducer 函数（counterReducer）
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
  return state;
}
// 使用 reducer 创建 store
const store = createStore(counterReducer);
// 读取 store 的当前状态
console.log(store.getState());
// store订阅一个更新函数，待dispatch之后，执行这个更新函数，获取新的值
store.subscribe(() -> {
  console.log('current state: ', store.getState());
});
const render = () => ReactDOM.render(
    <div>
      <span>{store.getState()}</span>
      // 向 reducer 发送一个 action 来更新 store
      <button onClick=={() => store.dispatch({ type: 'INCREMENT' })}>INCREMENT</button>
      <button onClick=={() => store.dispatch({ type: 'DECREMENT' })}>DECREMENT</button>
    </div>,
    root
)
render()

这个例子演示了如何使用Redux来实现点击按钮增减数字的效果。

  • 首先，我们使用 reducer 创建一个 store，以便与 Redux 进行交互。

  • 通过调用store.getState()方法获取当前的数字，初始值为0。

  • 使用store.subscribe()方法订阅一个用于更新页面的函数。每当reducer返回新的值时，该函数就会被调用

  • 当点击按钮时，我们通过调用dispatch方法告诉Redux我们是要增加还是减少数字（同时传入相应的action）。

  • dispatch方法内部会调用我们定义的reducer函数，结合当前的state和action，返回新的state。

  • 在返回新的state之后，我们调用订阅的更新函数，以更新页面。

总结一下，我们所有的操作都是通过store进行的，通过createStore方法创建唯一的 store ，提供getSate、dispatch、subscribe等方法。

Redux 的实现

现在让我们来看一下Redux内部的实现逻辑。Redux源码的src目录，主要包含6个核心文件，主要包括index.js、createStore.js、compose.js、combineRuducers.js、bindActionCreators.js和applyMiddleware.js文件

  • index.js：Redux入口文件，暴露出来主要接口
  • createStore.js：会创建一个 store 及其相应的 getSate、dispatch 和 subscribe 操作
  • combineReducers.js：合并多个 reducer 为一个总的 reducer
  • bindActionCreators.js：返回包裹 dispatch 的函数可以直接使用。 一般用在 mapDispatchToProps 里
  • applyMiddleware.js：提供中间件，如 redux-thunk、redux-logger
  • compose.js：combineReducers 中会用到的工具函数

下面我们就逐一对核心源码实现进行解读

createStore(reducer)

createStore 函数是Redux的核心，接受reducer状态更新函数，最终返回对象store，用来存放应用中的state，应用中仅有一个store，包含dispatch、subscribe、getState、replaceReducer等方法。简化后的代码如下

javascript 复制代码 
export function createStore(reducer, preloadedState, enhancer) {
  // 省略异常处理

  // 当前的reducer
  let currentReducer = reducer
  // 当前的state
  let currentState = preloadedState
  let currentListeners: Map<number, ListenerCallback> | null = new Map()
  let nextListeners = currentListeners
  let listenerIdCounter = 0
  // 是否正在dispatch aciton，想当于一把锁
  let isDispatching = false

  // 对当前订阅进行浅拷贝，防止在dispatch时订阅/取消订阅产生bug
  function ensureCanMutateNextListeners() {}

  // 读取由store管理的状态树
  function getState(): S {}

  // 注册监听事件，维护存放所有订阅函数的数组，并返回取消订阅的函数
  function subscribe(listener: () => void) {}

  // 分发action，这是触发State状态树变化的唯一方式
  function dispatch(action: A) {}

  // 替换当前store的reducer，并重新初始化State状态树
  function replaceReducer(nextReducer: Reducer<S, A>): void {}

  function observable() {}

  // store被创建后，分发'INIT'的action，初始State状态树
  dispatch({ type: ActionTypes.INIT } as A)

  // 组装并返回store对象
  const store = {
    dispatch: dispatch as Dispatch<A>,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  } as unknown as Store<S, A, StateExt> & Ext
  return store
}

store.dispatch(action)

dispatch函数分发action，是修改state的唯一方式

javascript 复制代码 
function dispatch(action) {
// 省略异常处理
    
    try {
      isDispatching = true
      // 调用当前reducer，传入当前state和action，并更新state状态树
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
        
    const listeners = (currentListeners = nextListeners)
    // 依次执行注册的lister监听事件
    listeners.forEach(listener => {
      listener()
    })
    // 返回action
    return action
}

store.getState()

getState函数比较简单，直接返回当前状态树

csharp 复制代码 
  function getState() {
    // 省略异常处理
    
    // 返回当前状态树
    return currentState as S
  }

store.replaceReducer(nextReducer)

replaceReducer函数用于替换当前store对象的reducer

php 复制代码 
  function replaceReducer(nextReducer) {
    // 省略异常处理
    
        // 替换当前reducer
    currentReducer = nextReducer

    // 分发'REPLACE'的action，重新初始化State状态树
    dispatch({ type: ActionTypes.REPLACE } as A)
  }

store.subscribe(lister)

subscribe接收监听函数，主要做了两件事，一是订阅监听函数，存放在数组中，在store.dispatch(action)时遍历执行监听函数，二是返回取消订阅函数

csharp 复制代码 
  function subscribe(listener: () => void) {
    // 省略异常处理

    let isSubscribed = true

    ensureCanMutateNextListeners()
    // 自增订阅函数id
    const listenerId = listenerIdCounter++
    // 将订阅函数放入store内部维护的集合中
    nextListeners.set(listenerId, listener)

    // 返回取消订阅的函数
    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      nextListeners.delete(listenerId)
      currentListeners = null
    }
  }

combineReducers()

combineReducers 函数用于将多个reducer函数合并成一个总的reducer，每次Reducer返回新的state时会和老的state对比，如果发生改变，hasChanged为true，使用新state触发页面更新；反之则不做处理。

typescript 复制代码 
export default function combineReducers(reducers) {
  // 获取所有reducers的key，组成数组
  const reducerKeys = Object.keys(reducers)
  // 获取最终有效的reducers，组成字典finalReducers
  const finalReducers: { [key: string]: Reducer<any, any, any> } = {}
  for (let i = 0; i < reducerKeys.length; i++) {
    const key = reducerKeys[i]

    if (process.env.NODE_ENV !== 'production') {
      if (typeof reducers[key] === 'undefined') {
        warning(`No reducer provided for key "${key}"`)
      }
    }

    if (typeof reducers[key] === 'function') {
      finalReducers[key] = reducers[key]
    }
  }
  const finalReducerKeys = Object.keys(finalReducers)

  // This is used to make sure we don't warn about the same
  // keys multiple times.
  let unexpectedKeyCache: { [key: string]: true }
  if (process.env.NODE_ENV !== 'production') {
    unexpectedKeyCache = {}
  }

  let shapeAssertionError: unknown
  try {
    // 用于检查每个reducer有没有默认返回的state
    assertReducerShape(finalReducers)
  } catch (e) {
    shapeAssertionError = e
  }

  // 这个函数的核心是循环遍历finalReducers，获取每个reducer对应的旧状态，并根据当前dispatch的action，生成新的sate状态，最终将所有新的state做为值，reducer的name为键，生成做最终的state
  return function combination(
    state: StateFromReducersMapObject<typeof reducers> = {},
    action: Action
  ) {
    if (shapeAssertionError) {
      throw shapeAssertionError
    }

    // 是否state发生了变化
    let hasChanged = false
    const nextState: StateFromReducersMapObject<typeof reducers> = {}
    for (let i = 0; i < finalReducerKeys.length; i++) {
      // 获取每个reducer的name
      const key = finalReducerKeys[i]
      // 获取每个reducer
      const reducer = finalReducers[key]
      // 获取每个reducer的旧state状态
      const previousStateForKey = state[key]
      // 获取每个reducer，根据这个reducer的旧state状态和当前action生成新state状态
      const nextStateForKey = reducer(previousStateForKey, action)
      // 以每个reducer的name为key，新state状态为值，更新最终的state
      nextState[key] = nextStateForKey
      // 判断是否state的值发生了变化
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    hasChanged =
      hasChanged || finalReducerKeys.length !== Object.keys(state).length
    // state发生了变化，返回新的sate，否则返回旧的sate
    return hasChanged ? nextState : state
  }
}

bindActionCreator()

bindActionCreator函数是将单个actionCreator绑定到dispatch上，bindActionCreators就是将多个actionCreators绑定到dispatch上。

javascript 复制代码 
function bindActionCreator(actionCreator, dispatch) {
  return function (this, ...args) {
    return dispatch(actionCreator.apply(this, args))
  }
}

export default function bindActionCreators(actionCreators, dispatch) {
  if (typeof actionCreators === 'function') {
    return bindActionCreator(actionCreators, dispatch)
  }

  // 省略异常处理

  const boundActionCreators: ActionCreatorsMapObject = {}
  // 遍历整个actionCreators，如果item是function类型，就调用bindActionCreator将actionCreator绑定到dispatch上
  for (const key in actionCreators) {
    const actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  return boundActionCreators
}

applyMiddleware()

applyMiddleware是一个增强器，组合多个中间件，最终增强store.dispatch()函数。reducer的设计理念是纯函数，如果需要一些副作用（处理异步逻辑、日志记录等），中间件的作用就体现出来了。

javascript 复制代码 
export default function applyMiddleware(
  ...middlewares: Middleware[]
): StoreEnhancer<any> {
  return createStore => (reducer, preloadedState) => {
    const store = createStore(reducer, preloadedState)
    // 省略异常处理

    const middlewareAPI: MiddlewareAPI = {
      getState: store.getState,
      dispatch: (action, ...args) => dispatch(action, ...args)
    }
    // 遍历中间件，将middlewareAPI传进去，得到的chain是一个数组
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // 利用compose函数依次执行中间件函数得到加强后的dispatch
    dispatch = compose<typeof dispatch>(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

总结

本文主要介绍了Redux的设计理念和源码解析。正如任何工具都有适用与非适用的场景，在使用Redux时也需要做权衡，Reudx的创始人之一Dan Abramov也发表过"你可能不需要Redux（You Might Not Need Redux）"。Redux适用于应用程序中存在大量状态，且状态变更逻辑复杂频繁的场景，对于没有复杂状态的较小程序，使用Redux产生的模板代码，反而使得不如直接使用React来的方便。

hi, 我是快手社交的 键盘破风手

快手社交技术团队 正在招贤纳士🎉🎉🎉! 我们是公司的核心业务线, 这里云集了各路高手, 也充满了机会与挑战. 伴随着业务的高速发展, 团队也在快速扩张. 欢迎各位高手加入我们, 一起创造世界级的产品~

热招岗位: Android/iOS 高级开发, Android/iOS 专家, Java 架构师, 产品经理, 测试开发... 大量 HC 等你来呦~ 内部推荐请发简历至 >>>我们的邮箱: social-tech-team@kuaishou.com <<<, 备注我的花名成功率更高哦~ 😘

相关推荐
也无晴也无风雨27 分钟前
深入剖析输入URL按下回车，浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中，ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心，方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别？
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间（禁用日期面板、控制开始时间不能超过结束时间的时分秒）实现方案
前端·javascript·elementui
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定