Redux Dispatch 如何知道调用哪个 Reducer

Redux 是一个受 Flux 启发的 JavaScript 应用程序状态管理工具。它的中心思想是应用程序的状态是全局的，以此减少复杂的状态管理问题，提高代码的可维护性。

在 Redux 中，有许多概念需要理解，例如 Store、Action、Reducer、Dispatcher 等等。其中，Reducer 是 Redux 的核心概念之一，用于更新应用程序的状态。

那么，Redux Dispatch 如何知道调用哪个 Reducer 呢？

简单介绍

在上下文中，Dispatch 是 Redux 的核心对象之一。它用于发送 Action 到 Reducer 中进行状态更新。当应用程序中的某些组件需要向 Store 发送 Action 时，它们会调用 Dispatch 对象的 dispatch() 方法。

当 dispatch() 方法被调用时，Redux 会将 Action 发送给所有注册的 Reducer 对象。而 Reducer 是一个纯函数，用于根据传入的 Action 类型和当前状态更新状态。每个 Reducer 均会返回一个新的状态对象。

如何知道调用哪个 Reducer？

在一个 Store 中，可以注册多个 Reducer。因此，当 Dispatch 对象接收到一个 Action 并尝试更新状态时，它需要知道将要执行哪一个 Reducer。

Redux 社区中概述了两种常用的处理方式：

单个 Reducer

在 Redux 中，可以使用一个 Reducer 函数来管理整个应用程序的状态。这个 Reducer 可以识别所有的 Action 类型，并根据类型来更新应用程序的状态。

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      // 根据 Action 类型更新状态
      return {
        ...state,
        counter: state.counter + 1
      }
    case 'DECREMENT':
      return {
        ...state,
        counter: state.counter - 1
      }
    default:
      return state
  }
}

可以看到，这个 Reducer 可以识别 'INCREMENT' 和 'DECREMENT' 两种 Action 类型，并根据不同的类型更新状态。

多个 Reducer

有时，在应用程序中，有必要使用多个 Reducer 来管理状态。在 Redux 中，可以使用 combineReducers() 函数将多个 Reducer 合并为一个函数。

import { combineReducers } from 'redux'

const reducer1 = (state = initialState1, action) => {
  switch (action.type) {
    // ...
  }
}

const reducer2 = (state = initialState2, action) => {
  switch (action.type) {
    // ...
  }
}

const rootReducer = combineReducers({
  reducer1,
  reducer2
})

// ...

在上述代码中，我们创建了两个 Reducer 函数 reducer1 和 reducer2。使用 combineReducers() 函数将它们合并为一个函数 rootReducer，并将其传递给 Redux Store。

Redux Store 收到 Action 并进行状态更新时，会将 Action 分发给 rootReducer。rootReducer 将按照其设置的键名，将 Action 分发至相应的 Reducer 作状态更新。

结论

当 Dispatch 对象在 Redux 中接收到 Action 并进行状态更新时，它会根据注册的 Reducer ，将 Action 分发至相应的 Reducer 作状态更新操作。可以使用单个 Reducer 函数来管理整个应用程序的状态，也可以将多个 Reducer 合并为一个函数。