JS – LouWii's Blog

I’m currently working on a React project using Redux. I was putting all my actions into one file, but it quickly became unmanageable. Weirdly, I’ve had a hard time to find a nice example showing up how to split all your actions into different files. So I’m sharing how I’ve set it up, as it might help a few people out there.

I’ve divided my actions into several files:

authActions.js
postActions.js
userActions.js

My actions look like this

export function getAccessToken(redirectURL, code) {
  return dispatch => {
    ...
  }
}

export function getAccessToken(redirectURL, code) {

return dispatch => {

...

}

I then have a actionCreators.js files that export all actions at once.

export * from './authActions'
export * from './postsActions'
export * from './userActions'

export * from './authActions'

export * from './postsActions'

export * from './userActions'

And then, I can import all actions at once:

import * as actionCreators from '../actions/actionCreators'

1	import * as actionCreators from '../actions/actionCreators'

But you can also import only the actions needed, of course 😉

Tag: JS

Split your Redux actions into several files