Redux 笔记 —— 你真的理解了 Reducer 吗？-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一个很流行的前端状态管理库，它简单明了地为我们管理组件间数据的传递、依赖和变化。而 Redux 中最重要的一个概念就是 Reducer。如果我们没有真正理解 Reducer 的作用和机制，可能会在项目开发中遇到各种问题。本文将详细介绍什么是 Reducer，以及如何在实际项目中使用 Reducer。

什么是 Reducer？

Reducer 是 Redux 中非常重要的概念，它的主要作用是用于修改 state。具体来说，Reducer 就是一个纯函数，它接受两个参数：当前的 state 和触发的 action。然后它根据 action 的类型来返回一个新的 state。一个简单的 Reducer 可以看作是这个样子：

function reducer(state, action) {
  switch (action.type) {
    case "ADD_TODO":
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    case "DELETE_TODO":
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload.id),
      };
    default:
      return state;
  }
}

在上面的代码中，我们定义了一个 Reducer 函数，它接收当前的 state 和一个 action。在 Reducer 函数内部，我们使用一个 switch 语句依据不同的 action.type 返回对应不同的 state。可以看到，通过 Reducer 函数，我们可以方便地对 state 进行修改，并且保证了 state 的纯洁性。

Reducer 如何使用

在实际项目中，我们会根据业务需求来定义多个 Reducer。一个常见的使用方式是将多个 Reducer 合并成一个，我们可以使用 Redux 中提供的 combineReducers 方法来实现。

import { combineReducers } from "redux";
import todosReducer from "./todosReducer";
import userInfoReducer from "./userInfoReducer"; 

const rootReducer = combineReducers({
  todosState: todosReducer,
  userInfo: userInfoReducer,
});

export default rootReducer;

在上面的代码中，我们定义了两个 Reducer：todosReducer 和 userInfoReducer。我们最终将它们合成了一个根 Reducer：rootReducer。其中，每个 Reducer 维护了不同的 state，通过 combineReducer 方法，我们可以将它们合并到一个对象中，这个对象的属性就是各个 Reducer 所维护的 state 的名称。

总结

本文介绍了 Redux 中非常重要的概念——Reducer, 本质上它只是一个可接受两个参数的纯函数，在实际应用中，我们建议根据需求开发不同的 Reducer，对于不同模块和类型的 state 进行单独的处理。对于同一个 action.type，不同的 Reducer 可以返回不同的 state，这样就可以避免因 state 改变而导致系统错误。最后，我们也提供了一些 Reducer 的最佳实践，希望可以对大家在实践中使用 Redux 的过程中有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a483ddadd4f0e0ffccc923

Redux 笔记 —— 你真的理解了 Reducer 吗？

什么是 Reducer？

Reducer 如何使用

推荐实践

总结

纠错反馈