将动作文件拆分为多个文件

Question

我的 React 应用程序中的操作文件变得非常大并且难以管理。尽管我已经有多个操作文件，即 userActions.js、accountActions.js 等，但还是会发生这种情况。这些文件非常冗长，我需要不断上下滚动才能找到我需要的特定操作。

我的想法是将模块的操作文件拆分为多个文件，然后将它们导入到父级文件中，这样在我的 React 组件中我仍然导入单个操作文件。

请记住，我正在为单个模块拆分操作文件，这一点很重要。我已经为应用程序的不同域提供了多个操作文件。我的意思是，即使是单个模块的操作文件也越来越大。

不过，我对它的工作原理有点困惑。

说，我有一堆这样的文件。我将以下内容另存为 module1UserActions.js

export const userAction1 = (value) => {
    return {
        type: types.ACTION1,
        value
    };
}

export const userAction2 = (value) => {
    return {
        type: types.ACTION2,
        value
    };
}

然后，假设我有如下所示的 module1AccountActions.js 文件：

export const accountAction1 = (value) => {
    return {
        type: types.ACTION3,
        value
    };
}

export const accountAction2 = (value) => {
    return {
        type: types.ACTION4,
        value
    };
}

如果我想将它们全部放在一个文件中，我可以将它们导入到我的组件中，我该如何将它们放在一起？比如说，以下是将各个文件组合在一起的 module1Actions.js。我猜这个文件只会包含一堆导入。

import * as userActions from 'module1UserActions';
import * as accountActions from 'module1AccountActions';

然后在我的组件中导入该单个文件，但我认为我会遇到操作名称问题，对吧？

import * as actions from 'module1Actions';

但我认为当我需要使用 userAction1 时，我必须将其称为 actions.userActions.userAction1

这种方法行得通吗？

Answer 1

您需要在您的操作文件中明确导出您的操作。

import * as userActions from 'userActions';
import * as accountsActions from 'accountActions';

export {
  ...userActions,
  ...accountActions,
};

我正在使用扩展运算符 (...) 来展平生成的对象。您现在可以像这样导入并调用您的操作：

import * as actions from 'actions';

actions.userAction1();