作为一名前端开发人员，你可能已经听说过 Redux，它是一个流行的 JavaScript 应用程序状态管理库。Redux 提供了一些关键概念，如 Store、Reducer、Action 和 Middleware，在现代的前端应用程序开发中非常重要。本篇文章将重点介绍如何理解和使用 Redux 中的 Reducer。
Reducer 是什么？
Reducer 是一个纯函数，它接收两个参数：当前的 state 和 action，然后返回一个新的 state。Reducer 在 Redux 中非常重要，因为它用于修改和管理应用程序的状态。Redux 应用程序中的所有状态都由 reducer 来管理。
为什么叫做 Reducer？
Reducer 与函数式编程中的 reduce 概念有关。reduce 函数接收一个数组，将每个元素与一个累加器函数一起进行处理，并返回一个单一的值。Reducer 在 Redux 中遵循同样的原理。
Reducer 的基本结构
Reducer 是一个普通的 JavaScript 函数，它可以看作是应用程序状态的管理中心。Reducer 接收两个参数：当前 state 和 action。
function reducer(state, action) { // 处理 state 和 action，并返回新的 state return newState; }
Reducer 必须是一个纯函数，它不应该做任何的副作用操作，例如修改传入的参数，发起网络请求等等。Reducer 的输出必须完全基于输入参数。
Reducer 的示例
假设我们正在开发一个简单的计数器应用程序，它有两个功能：增加计数器和减少计数器。
-- -------------------- ---- ------- -- ----- - ----- ------------ - - ------ - -- -------- -------------------- - ------------- ------- - ------ ------------- - -- ----- ---- ------------ ------ - ------ ----------- - - -- -- ----- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - -展开代码
在上面的代码中，我们定义了一个 reducer，它管理一个计数器的状态。初始状态为 0，然后根据不同的 action 类型来更新计数器。
接下来，我们需要使用 createSlice 函数来创建一个 Redux slice，它将包含我们的 reducer。
-- -------------------- ---- ------- ------ - ----------- - ---- ------------------- ----- ------------ - ------------- ----- ---------- ------------- --------- - ---------------- -------- -------------- -- ---------------- -------- -------------- - - --- ------ ----- - ---------- --------- - - --------------------- ------ ------- ---------------------展开代码
注意，我们使用了 @reduxjs/toolkit 包中的 createSlice 辅助函数，该函数的作用是简化了 reducer 的创建过程。
Reducer 的最佳实践
为了让 reducer 的代码可读性更高，我们需要将 reducer 拆分成多个小的 reducer 函数，然后再将它们合并成一个大的 reducer 函数。这样做可以让我们更好地组织我们的应用程序状态，并且避免出现大而复杂的 reducer 函数。
例如，我们可以将之前的计数器示例拆分成两个小的 reducer 函数，一个用于增加计数器，另一个用于减少计数器。
-- -------------------- ---- ------- -------- ---------------------- - -- ------- - ------ ------------- - ---- ------------ ------ ----- - -- -------- ------ ------ - - -------- ---------------------- - -- ------- - ------ ------------- - ---- ------------ ------ ----- - -- -------- ------ ------ - - ----- ----------- - ----------------- ------ ----------------- --------- ---------------- ---展开代码
在上面的代码中，我们将计数器的增加和减少分别定义为两个独立的 reducer 函数，然后使用 combineReducers 函数将它们合并成一个 rootReducer 函数。最终生成的状态对象将会包含 count 和 negCount 两个属性。
总结
在 Redux 应用程序中，Reducer 是一个非常重要的概念。Reducer 是一个纯函数，它接收当前的 state 和 action，然后返回新的 state。Reducer 必须是一个纯函数，它不应该有副作用操作。最佳实践是将大的 reducer 函数拆分成多个小的 reducer 函数，然后使用 combineReducers 函数将它们合并成一个 rootReducer 函数，以更好地组织应用程序状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c47b8968c7c53b0b4a44e
