CODEWITHSUNDEEP
reactjsreduxreact-redux
ishan Vadwala
ishan Vadwala

Reputation: 359

How to arrange action creators in a react-redux application?

I'm fairly new to React & Redux and all this while, I'm putting all my action creators & my constants into a single file '../actions/index.js'. When I started out, this seemed fine but now, it's become this huge block of unreadable code.

Would you suggest breaking down index.js into functionality1.js, func2.js, func3.js and then importing actions as needed from split up files: 

import {sampleAction} from '../action/func1';

Or is there a better way to do this?

Sorry if this seems like a silly question. I'm still trying to understand best practices in a React-Redux application.

Upvotes: 3

Views: 1378

Answers (1)

Michael Peyper
Michael Peyper

Reputation: 6944

You can still split it up but retain the index.js for simplicity using the export * from '...' syntax.

actions/functionality1.js:

export const ACTION_1 = '...'
export const ACTION_2 = '...'

export const action1 = () => {...}
export const action2 = () => {...}

actions/functionality2.js:

export const ACTION_3 = '...'
export const ACTION_4 = '...'

export const action3 = () => {...}
export const action4 = () => {...}

actions/index.js:

export * from './functionality1'
export * from './functionality2'

Then you can import any you need like so:

import { action1, action4, ACTION_2, ACTION_3 } from './actions'

Upvotes: 6

Related Questions