What is the correct way to load actions in containers?

[louisremi]

Hi,

I'm a newbe in react-redux development. I'm starting by trying to recreate the tree-view example of redux using this generator. I have to say the work was fairly easy, until I had to write my first container. I did not have any example of how the generated code might be customized to produce a useful container, so I had to poke around a bit.

The thing that bothers me now is that I'm not sure how to "load" the actions I've created, inside my container. I ended up copying the mapDispatchToProps generated in App.js that lists all actions into my container. But that doesn't look very DRY. So there's probably something I'm missing here, and if not, something that could be improved :-)

Thank you in advance,
Louis-Rémi

[stylesuxx]

Unfortunately, yes this is the way to go, if you have several top level containers.
You could of course build your app in a way that the App container is the outer most container, and does the routing to all other containers, in this case the app container could pass down all needed actions to its children which then would not need to map the actions on their own.

However, I am open for suggestions here. If you have an idea how to improve this, please share it.

[louisremi]

the app container could pass down all needed actions to its children which then would not need to map the actions on their own

I'm guessing my problem is only that I don't know how to do this. I've tried to google it but couldn't find anything useful. May I ask you to point to a relevant doc or example? Thank you in advance : )

[stylesuxx]

Well your TextNode container is just a Component, so you can use it like this in the App container:

...

import TextNode from './TextNode';
class App extends Component {
  render() {
    const {actions, nodes} = this.props;
    return <TextNode someAction={actions.someAction} anotherAction={actions.anotherAction} />;
  }
}

...

[louisremi]

I took example from the Redux tree-view example. My TextNode container is a copy of the Node container in that project. I'm curious to learn why, in my case, TextNode is a component and not a container.

[stylesuxx]

Every container is a component. It is just a matter of definition. In Redux context, components that are "smart" and handle their own state are called containers. Components are "dumb or presentational" and do not have their own state and they do not care about what the app actually does, they only care about getting all the props they need.

It is explained more in depth in the redux docs.

[louisremi]

Wouldn't it be more useful it the react-webpack-redux:action generator added every action to a single file (src/actions/all.js for example) instead of adding them to the App.js container?

[stylesuxx]

What would be the benefits of this in your opinion? I have it like that since I can see just by looking at a container what actions it is using and thus quickly know what the container is responsible for.

[louisremi]

The benefits would be to reduce the verbosity of importing actions in containers. Instead of:

function mapDispatchToProps(dispatch) {
  /* Populated by react-webpack-redux:action */
  const actions = {
    createNode: require('../actions/nodes/createNode.js'),
    deleteNode: require('../actions/nodes/deleteNode.js'),
    addChild: require('../actions/nodes/addChild.js'),
    removeChild: require('../actions/nodes/removeChild.js'),
    createFont: require('../actions/fonts/createFont.js'),
    addFont: require('../actions/fonts/addFont.js'),
    ...
  };
  const actionMap = { actions: bindActionCreators(actions, dispatch) };
  return actionMap;
}

We could have:

import { createNode, deleteNode, addChild, removeChild, createFont, addFont } from './../actions/all';
...
function mapDispatchToProps(dispatch) {
  const actions = {
    createNode,
    deleteNode,
    addChild,
    removeChild,
    createFont,
    addFont,
    ...
  };
  const actionMap = { actions: bindActionCreators(actions, dispatch) };
  return actionMap;
}

[stylesuxx]

Totally makes sense - will look into this.

Thank you for the suggestion.

[stylesuxx]

Actions are now centrally exported from 'actions/index.js', so importing and mapping as suggested by @louisremi is now possible. Added to develop, will be part of the next release.