Question

在我有大型应用时，组织我的操作类型和状态的最佳做法是什么？一个问题可能是我想使用相同的名称，因为它是一个类似的动作和类似的状态。仅供讨论：如果我想更新两个标题，我是否需要使用名称约定，如FIRST_TITLE和SECCOND_TITLE作为操作类型，firstTitle和seccondTitle用于状态？如果您有更好的解决方案，请通知我。

Answer 1

您可以使用redux-auto之类的内容。它从您的文件系统生成操作和缩减器。

我们正在将它用于大型项目的产品中，它确实帮助降低了复杂性。很不错，每个转换都有自己的文件，这就变成了你生成的动作名+共同位于同一文件的异步代码。

总结：

它将减速器组成的思想更进一步。而不是有一个代表你的reducer和创建单独的动作函数的文件。

redux-auto的方法是让文件夹包含单独的JS文件，表示状态上的每个操作/转换，并将其动态地公开为函数

例如

import actions from 'redux-auto'
...
actions.user.changeName({name:"bob"})

现在，无论如何，你可以在你的应用程序中编写

export default function (user, payload) {
    return Object.assign({},user,{ name : payload.name });
}

存储/用户/ changeName.js

action.type == actions.user.changeName // "USER/CHANGENAME"

多数民众赞成！

如果您想在第三方Reducer中监听redux操作。您可以使用对功能进行宽松的质量检查。

// Returns true if it's an action specifically for user
if(action.type in actions.user)

对于更高级的内容，您甚至可以查看特定减速器是否拥有某个操作

{{1}}

您可以在project page

上阅读更多内容

希望这会有所帮助：）

Answer 2

在一个大型应用程序中，我将我的代码组织成模块，每个模块都有自己的reducer，actions等。每个模块都会导出动作类型和动作创建者，我会使用那些exlusively，而不是只传递一个字符串作为类型。这可以防止模块之间发生任何命名冲突 - 实际上我试图将动作名称保持简短。

模块/项目/ actionTypes.js：

export const name = "items";

export const UPDATE_TITLE = `${name}/UPDATE_TITLE`;

模块/项目/ actions.js

import * as actionTypes from "./actionTypes";

export const updateTitle = (title) => ({
  type: actionTypes.UPDATE_TITLE,
  payLoad: title,
});

模块/项目/ reducer.js

import * as actionTypes from "./actionTypes";

const initialState = { title: "" };

const reducer = (state = initialState, action) {
  switch(action.type) {
    case actionTypes.UPDATE_TITLE: {
      return {
        ...state,
        title: action.payload,
      };
    }
  }
}

export default reducer;

模块/评论/ actionTypes.js

export const name = "comments";

export const UPDATE_TITLE = `${name}/UPDATE_TITLE`;

模块/评论/ actions.js

import * as actionTypes from "./actionTypes";

export const updateTitle = (title) => ({
  type: actionTypes.UPDATE_TITLE,
  payLoad: title,
});

模块/评论/ reducer.js

import * as actionTypes from "./actionTypes";
import * as itemActionTypes from "../items/actionTypes";

const initialState = { title: "" };

const reducer = (state = initialState, action) {
  switch(action.type) {
    case actionTypes.UPDATE_TITLE: {
      return {
        ...state,
        title: action.payload,
      };
    }
    case itemActionTypes.UPDATE_TITLE: {
      // Do something with the updated item title
    }
  }
}

export default reducer;

rootReducer.js

import { combineReducers } from "redux";
import { default as itemsReducer } from "modules/items/reducer";
import { default as commentsReducer } from "modules/comments/reducer";

export default combineReducers({
  items: itemsReducer,
  comments: commentsReducer,
});

编辑：添加减速器以回答评论

组织Redux操作类型和状态

2 个答案: