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

Question

我有一个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中,所以在我的组件中我仍然可以做到例如import { loginUser } from '../../actions';而不是不得不担心行动来自哪个档案？

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

比方说,我们有两个动作文件; actionsA和ActionsB.假设在actionsA中我们有以下动作功能.

//actionsA

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

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

在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导入不同的操作,然后导出导入的函数.

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