如何在 react-redux 应用程序中安排动作创建者？答案

【问题标题】：How to arrange action creators in a react-redux application?如何在 react-redux 应用程序中安排动作创建者？
【发布时间】：2017-04-18 01:54:57
【问题描述】：

我对 React 和 Redux 还很陌生，而且一直以来，我都将我所有的动作创建者和我的常量放在一个文件“../actions/index.js”中。当我开始的时候，这看起来很好，但现在，它变成了一大块不可读的代码。

您是否建议将 index.js 分解为功能 1.js、func2.js、func3.js，然后根据需要从拆分的文件中导入操作：

import {sampleAction} from '../action/func1';

或者有更好的方法吗？

抱歉，这似乎是一个愚蠢的问题。我仍在尝试了解 React-Redux 应用程序中的最佳实践。

【问题讨论】：

【解决方案1】：

您仍然可以将其拆分，但为了简单起见，请使用 export * from '...' 语法保留 index.js。

动作/功能1.js：

export const ACTION_1 = '...'
export const ACTION_2 = '...'

export const action1 = () => {...}
export const action2 = () => {...}

actions/functionality2.js：

export const ACTION_3 = '...'
export const ACTION_4 = '...'

export const action3 = () => {...}
export const action4 = () => {...}

actions/index.js：

export * from './functionality1'
export * from './functionality2'

然后你可以像这样导入任何你需要的东西：

import { action1, action4, ACTION_2, ACTION_3 } from './actions'

【讨论】：

这真是太好了，谢谢！我可以/应该对容器/组件做同样的事情吗？
没有理由不能在整个应用程序中使用这个技巧。我经常用它来分解功能的逻辑部分。例如，用于登录的所有组件、容器、动作、动作类型和减速器将被分离到一个 Login 文件夹中，其中一个 index.js 导出每个部分。