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();

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

1 个答案: