3

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.

ishan Vadwala
  • 359
  • 4
  • 12
  • Not a silly question at all. You may prefer this kind of structure instead: https://github.com/erikras/ducks-modular-redux – Josep Apr 18 '17 at 02:04

1 Answers1

6

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'
Community
  • 1
  • 1
Michael Peyper
  • 6,814
  • 2
  • 27
  • 44
  • That's really neat, thanks! Could/should I do the same for containers/components? – ishan Vadwala Apr 18 '17 at 06:43
  • There's no reason you can't use this trick throughout your entire app. I often use it break up logical sections of functionality. For example all the the component, containers, action, action types and reducers for login would be seperated into a `Login` folder with an `index.js` exporting each of the pieces. – Michael Peyper Apr 18 '17 at 10:36