CODEWITHSUNDEEP
reactjsarchitecturereduxflux
George Welder
George Welder

Reputation: 4045

How do you organise actions in Redux?

I have a folder called actions with a file called index.js, and I have been putting all my actions into it so far. It's getting quite messy now and I was wondering how to best split things. Is there any good strategy? Do you keep them in different files? Grouped by...? Or do you just keep them in different files as partials and then include them in the index file, and then always only ever import the index file?

Upvotes: 0

Views: 508

Answers (2)

thsorens
thsorens

Reputation: 1318

Putting everything in one action.js will very quickly grow out of control, the same is the case for the reducers.

It really comes down to personal taste, but the trends i've seen, seems to be to seperate the app into features, where each feature is isolated with its own actions, and a reducer for each feature as well.

Each level of the application tree will then combine reducers and your store will end up looking like the folder-structure, making it easier to find things. A feature will typically contain actions.js, reducer,js, index.jsx and maybe also style.scss/css for that feature. The pros of doing it that way, is that it is extremely easy to remove the feature at some point, without having to dig for dead code all over the place.

You don't mention how you bundle your code. This approach is nice when building with ex Webpack.

Upvotes: 2

Sam Pakvis
Sam Pakvis

Reputation: 189

You can use bindActionCreators (http://redux.js.org/docs/api/bindActionCreators.html).

Small example:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux';
import * as filterActions from '../actions/filterActions';
import * as writeActions from '../actions/writeActions';

class TestComponent extends Component {
  render(){
    return <div>Test</div>;
  }
}


function mapDispatchToProps(dispatch){
  return {
    filterActions: bindActionCreators(filterActions, dispatch),
    writeActions: bindActionCreators(writeActions, dispatch)
  };
}

export default connect(null, mapDispatchToProps)(TestComponent);

This will add the actions to the props of your component (at the key that you used in the return Object in mapDispatchToProps). So if you want to use an action from filterActions you can use this.props.filterActions.actionName().

Upvotes: 0

Related Questions