Problem dispatching actions from different components

First of all, thankyou @wellyshen for the great boilerplate.

I have the following structure from a checkout of the boilerplate 5 days ago.

        /Tags/
             /index.js //component
             /reducer.js // the reducer for that component
             /actions.js // all the actions that can be performed by that component
       /Products/
             /index.js
             /reducer.js 
             /actions.js 

I’m trying to have a component connect to two reducers.

I use redux’s connect and mapStateToProps in this way:

const mapStateToProps = state => (
    { products: state.get('products').products, tags: state.get('tags').tags }
  );
  
  export default connect(mapStateToProps)(Products);

Now, I’d like to dispatch from the very same component two actions. One action is from the actions in the same component folder, and the other is from the folder in tags. The name of the actions are unique. The actions are executed correctly and both try to update their own reducers with dispatch(). The reducer of tags doesn’t receive his own dispatch (it doesn’t see it), while the reducer of Products, receives both.

I believe i’m doing a bit (lot) of confusion with the function dispatch that seams to be the same and coming from the component itself. Actions that are dispatched from the Tags component are processed correctly by its reducer.

Any suggestion?

[nicolabortignon]

Ok, so I had to rewrite the injection of the reducer in the router.js.

Not the most elegant but here it is:

`{ path: ‘/products’, getComponent(nextState, cb) { const importModules = Promise.all([ System.import(‘./containers/Products’), System.import(‘./containers/Products/reducer’), System.import(‘./containers/Tags/reducer’), ]);

      const renderRoute = loadModule(cb);

      importModules
        .then(([Component, ...reducers]) => {
          console.log('reducer');
          console.log(reducers);
          injectReducer(store, 'products', reducers[0].default);
          injectReducer(store, 'tags', reducers[1].default);
          renderRoute(Component);
        })
        .catch(errorLoading);
    },
  },

`

Ideally would be nice if the system.import can detect the name of the reducer, and the injectReducer calls is called on every element of the array reducers… but oh well. for now at least it works 😃

[wellyshen]

@nicolabortignon

Just pass the reducer as the prop from the top level container.

By the way if you have a container inside a container, then you also can access the reducer through the redux connect from the children container directly, because the reducer of the container already be injected while the route be injected 😃