Redux 行动指南：组织 Action 和 Reducer 的秘诀

2024-02-20 20:43:16

保持 Redux 应用的井然有序对于其可维护性和可测试性至关重要。组织好你的 Action 和 Reducer 文件是实现这一目标的关键。

组织 Action

将 Action 组织成单独的文件，每个文件包含一组相关 Action。这有助于保持代码整洁，并使查找和修改特定 Action 变得更加容易。例如：

// userActions.js
export const LOGIN_USER = "LOGIN_USER";
export const LOGOUT_USER = "LOGOUT_USER";

组织 Reducer

同样，将 Reducer 组织成单独的文件，每个文件包含一组相关的 Reducer。这也有助于保持代码整洁，并使查找和修改特定 Reducer 变得更加容易。例如：

// userReducer.js
import { LOGIN_USER, LOGOUT_USER } from "./userActions";

const initialState = {
  isLoggedIn: false,
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case LOGIN_USER:
      return { ...state, isLoggedIn: true };
    case LOGOUT_USER:
      return { ...state, isLoggedIn: false };
    default:
      return state;
  }
}

命名约定

使用一致的命名约定来命名 Action 和 Reducer。这将提高代码的可读性和可维护性。例如：

Action: 以动词或形容词结尾，表示它们执行的操作。
Reducer: 以名词或形容词结尾，表示它们负责管理的状态。

拆分大文件

如果 Action 或 Reducer 文件变得太大，请将它们拆分成更小的文件。这将使代码更容易管理，并防止单个文件变得难以维护。

使用组合器

组合器可用于将多个 Reducer 组合成一个单一的 Reducer。这有助于组织 Reducer 并减少代码重复。例如：

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

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

export default rootReducer;