如何将Redux操作拆分为多个文件

我有一个actions文件夹，其中包含用于操作类型常量的常用types.js文件，还有一个index.js文件，它执行以下操作

import axios from 'axios';
import { browserHistory } from 'react-router';
import {
  AUTH_USER,
  UNAUTH_USER,
  AUTH_ERROR,
  FETCH_MESSAGE
} from './types';

---

并为我的所有操作导出函数。我想知道，是否有一种方法可以创建多个文件来定义我的操作，这样index.js就不会变得太长，然后将这些文件导入到我的index.js中，这样在我的组件中，我仍然可以从“../../actions”导入{logiuser}假设您具有以下目录结构：

actions/
  index.js
  types.js
  ProductActions.js

在你的操作/index.js中写下：

export * from './ProductActions';

然后定义ProductActions.js如下：

import axios from 'axios';
import { ... } from './types';

export const fetchProducts = () => { ... };
export const deleteProduct = () => { ... };

请记住，还要使用新的动作类型文件更新减速器：

import { ... } from '../actions/types'

---

比如说，我们有两个动作文件；动作a和动作b。 假设在actionsA中，我们有以下操作函数

//actionsA

//You can import your actionTypes here
export function functionActionsA1(){ /* action body ActionsA1 */}

export function functionActionsA2(){ /* action body ActionsA2 */}

//index.js
import {functionActionsA1, functionActionsA2 } from './actionsA'
import {functionActionsB1, functionActionsB2} from './actionsB'

export functionActionsA1
export functionActionsA2
export functionActionsB1
export functionActionsB2

在actionsB中，我们有以下代码：

//actionsB

//You can import your actionTypes here

export function functionActionsB1(){ /* action body ActionsB1 */}

export function functionActionsB2(){ /* action body ActionsB2 */}

假设我们有一个包含这两个文件的文件夹；actionsA和actionsB，以及index.js文件

actions/ 
   index.js
   actionsA.js
   actionsB.js

在index.js文件中，我们从actionsA和actionsB导入不同的操作，然后导出导入的函数

//actionsA

//You can import your actionTypes here
export function functionActionsA1(){ /* action body ActionsA1 */}

export function functionActionsA2(){ /* action body ActionsA2 */}

//index.js
import {functionActionsA1, functionActionsA2 } from './actionsA'
import {functionActionsB1, functionActionsB2} from './actionsB'

export functionActionsA1
export functionActionsA2
export functionActionsB1
export functionActionsB2

现在，您只需导入索引文件并获得您想要使用的操作，如下所示：

import {functionActionsA1,functionActionsB2} from '../../actions/index'

---

当然，为什么不呢？创建多个文件，然后在此文件中导入这些文件的内容，然后导出。你在想什么？好奇做

export const fetchProducts=（）=>{…}是否有好处

vs

export function fetchProducts（）{…}

。我个人决定坚持ES6语法，所以我几乎再也不写function关键字了。但请注意，使用函数和使用箭头函数语法在范围上存在差异。本质上，关键字this将具有不同的含义。在尝试这样的解决方案时，我遇到了一个解析错误，说我需要在

{}

中包装我正在导出的内容（例如，

functionsa1

）。因此，index.js文件底部的每个导出行应该更像

export{functionActionsA1}

。我猜你正在使用ES5，这就是为什么你会有这个问题。请参见出现此问题（操作文件变得太大）；问自己这是否是坏模式的迹象。个人观点，但这里描述的从导入到再导出看起来很糟糕，与定义为“可拆分”的组合减速机相比。我仍然不确定大部分逻辑应该在哪里完成（操作或减速机）@Ben我认为这确实归结为您的偏好。我非常喜欢在我的Redux操作中使用，这使我在操作中容纳了我的大部分逻辑。我接触过的每个Redux用户似乎都遵循相同的思维方式（在操作中保留大多数逻辑，并使用更小、更简洁的简化程序）。请在ReduxGitHub中查看此链接，以获取更多链接信息！同样，在我的简化程序中，

Object.assign（{}，state，action.payload）

是唯一可以使用的东西。。喋喋不休地说那些是相关的。你仍然会在行动中得到很多东西，我们正在寻找一种干净的方法来分割它们