Redux 中合理使用 combineReducers-JavaScript中文网-JavaScript教程资源分享门户

Redux 是一种 JavaScript 状态管理库，它提供了一种可预测的状态管理方案，使得 Web 应用程序的状态变得更加可控。然而，对于一个复杂的应用程序来说，Redux 的单一状态树可能变得过于庞大和复杂，这时候就需要使用 combineReducers 来帮助我们管理应用程序的状态。

什么是 combineReducers

combineReducers 是 Redux 提供的一个工具函数，它可以将多个 reducer 合并成一个 reducer，从而将应用程序的状态分成多个子状态。combineReducers 接收一个对象作为参数，这个对象的属性名对应着应用程序的子状态名称，属性值对应着处理这个子状态的 reducer。

如何使用 combineReducers

使用 combineReducers 非常简单，我们只需要按照以下步骤即可：

创建多个 reducer

// javascriptcn.com 代码示例
// userReducer.js
const userReducer = (state = {}, action) => {
  switch (action.type) {
    case "SET_USER_NAME":
      return {
        ...state,
        name: action.payload,
      };
    default:
      return state;
  }
};

// todoReducer.js
const todoReducer = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: action.payload.id,
          text: action.payload.text,
          completed: false,
        },
      ];
    default:
      return state;
  }
};

使用 combineReducers 合并 reducer

// javascriptcn.com 代码示例
// reducers.js
import { combineReducers } from "redux";
import userReducer from "./userReducer";
import todoReducer from "./todoReducer";

const reducers = combineReducers({
  user: userReducer,
  todo: todoReducer,
});

export default reducers;

在应用程序中使用新的 reducer

// javascriptcn.com 代码示例
// index.js
import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducers from "./reducers";
import App from "./App";

const store = createStore(reducers);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

为什么要使用 combineReducers

使用 combineReducers 可以帮助我们将应用程序的状态分成多个子状态，从而使得应用程序的状态更加可控。同时，使用 combineReducers 还可以提高应用程序的性能，因为每个子状态都有自己的 reducer，每个 reducer 只需要处理对应的子状态，这样可以避免不必要的计算。

总结

在使用 Redux 进行状态管理时，使用 combineReducers 可以帮助我们将应用程序的状态分成多个子状态，从而使得应用程序的状态更加可控，同时还可以提高应用程序的性能。在实际开发中，我们应该根据应用程序的实际情况来合理使用 combineReducers。

示例代码

以下是一个使用 combineReducers 的示例代码：

// javascriptcn.com 代码示例
// userReducer.js
const userReducer = (state = {}, action) => {
  switch (action.type) {
    case "SET_USER_NAME":
      return {
        ...state,
        name: action.payload,
      };
    default:
      return state;
  }
};

// todoReducer.js
const todoReducer = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          id: action.payload.id,
          text: action.payload.text,
          completed: false,
        },
      ];
    default:
      return state;
  }
};

// reducers.js
import { combineReducers } from "redux";
import userReducer from "./userReducer";
import todoReducer from "./todoReducer";

const reducers = combineReducers({
  user: userReducer,
  todo: todoReducer,
});

export default reducers;

// index.js
import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducers from "./reducers";
import App from "./App";

const store = createStore(reducers);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

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