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

Question

我有一个操作文件夹，其中包含用于操作类型常量的常用 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 中，所以在我的组件中我仍然可以这样做，例如 @987654322 @ 并且不必担心操作来自哪个文件？

Answer 1

假设您具有以下目录结构：

actions/
  index.js
  types.js
  ProductActions.js

在你的 actions/index.js 中，写：

export * from './ProductActions';

然后将 ProductActions.js 定义为：

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

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

记得用新的动作类型文件更新你的 reducer：

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

Answer 2

比如说我们有两个动作文件；行动A 和行动B。 假设在 actionsA 中我们有以下动作函数。

//actionsA

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

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

在actionB中我们有以下代码：

//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 中导入不同的动作，然后导出导入的函数。

//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'