Как разделить действия Redux на несколько файлов

у меня есть папка действий с обычными типами.JS-файл для констант типа действия плюс индекс.JS-файл, который делает следующее

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

а также экспортирует функции для всех моих действий. Мне интересно,есть ли способ создать несколько файлов для определения моих действий так индексировать.js не становится слишком длинным, а затем импортирует их в мой индекс.js поэтому в моих компонентах я все еще могу просто сделать, например import { loginUser } from '../../actions'; и не нужно беспокоиться о том, какой файл будет действовать от?

7
redux

2 ответов

предполагая, что у вас есть следующее структура каталогов:

actions/
  index.js
  types.js
  ProductActions.js

внутри действия индекса/.js пишите:

export * from './ProductActions';

затем определите ProductActions.js примерно так:

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

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

Не забудьте также обновить редукторы с новым файлом типов действий:

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

скажем, например, у нас есть два файла действий; 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, и индекс.файл js.

actions/ 
   index.js
   actionsA.js
   actionsB.js

в индекс.файл 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'
4