How to split Redux actions into multiple files
Say for example we have two actions files; actionsA and ActionsB. Suppose in actionsA we have the following action functions.
//actionsA
//You can import your actionTypes here
export function functionActionsA1(){ /* action body ActionsA1 */}
export function functionActionsA2(){ /* action body ActionsA2 */}
and in actionsB we have the following code:
//actionsB
//You can import your actionTypes here
export function functionActionsB1(){ /* action body ActionsB1 */}
export function functionActionsB2(){ /* action body ActionsB2 */}
Say we have a folder actions containing the two files; actionsA and actionsB, and an index.js file.
actions/
index.js
actionsA.js
actionsB.js
In index.js file we import the different actions from actionsA and actionsB and then exports the imported functions.
//index.js
import {functionActionsA1, functionActionsA2 } from './actionsA'
import {functionActionsB1, functionActionsB2} from './actionsB'
export functionActionsA1
export functionActionsA2
export functionActionsB1
export functionActionsB2
Now you can just import your index file and get the actions you would want to use as shown below:
import {functionActionsA1,functionActionsB2} from '../../actions/index'
Assuming you have the following directory structure:
actions/
index.js
types.js
ProductActions.js
Inside your actions/index.js, write:
export * from './ProductActions';
Then define ProductActions.js as something like:
import axios from 'axios';
import { ... } from './types';
export const fetchProducts = () => { ... };
export const deleteProduct = () => { ... };
Remember to also update your reducers with the new action types file:
import { ... } from '../actions/types'