I am new to react-redux world and having some trouble visualising a piece of plex data flow (I think).

Assume the state contains a collection of tracks and an array of favorite track ids. User could favorite a track from a number of various ponents e.g. musicplayer, tracklist, charts and all the others would have to rerender.

At the moment, I'm triggering an action to add/remove the track id to/from the favorites array. But I can't quite see how to proceed from there.

My plan is to trigger another action for e.g. the trackItem reducer to listen and carry on. Or could each related ponent directly subscribe to changes of the favorites collection? Or can I have two reducers listening to the same action? I have now idea how to implement something like that and also I have a gut feeling that I'm on the wrong path.

Feels like I'm struggling to get rid of my backbone-marionette habits. How would you do it?

My other plan is to have an isFavorited boolean within the track item json and use an action/reduces to update/toggle that property. I understand that normalizr will merge instances with the same id, so any ponent subscribed to its changes will react.

I am new to react-redux world and having some trouble visualising a piece of plex data flow (I think).

Assume the state contains a collection of tracks and an array of favorite track ids. User could favorite a track from a number of various ponents e.g. musicplayer, tracklist, charts and all the others would have to rerender.

At the moment, I'm triggering an action to add/remove the track id to/from the favorites array. But I can't quite see how to proceed from there.

My plan is to trigger another action for e.g. the trackItem reducer to listen and carry on. Or could each related ponent directly subscribe to changes of the favorites collection? Or can I have two reducers listening to the same action? I have now idea how to implement something like that and also I have a gut feeling that I'm on the wrong path.

Feels like I'm struggling to get rid of my backbone-marionette habits. How would you do it?

My other plan is to have an isFavorited boolean within the track item json and use an action/reduces to update/toggle that property. I understand that normalizr will merge instances with the same id, so any ponent subscribed to its changes will react.

• javascript
• reactjs
• react-native
• redux

3 Answers 3

Or could each related ponent directly subscribe to changes of the favorites collection

They could. But do these ponents all share some parent ponent? If so I would have that parent ponent subscribe to the state change of the favorites array, and pass that down as props to the ponents that need it.

I would remend really reading through the redux docs: https://rackt.github.io/redux/

Especially usage with React: https://rackt.github.io/redux/docs/basics/UsageWithReact.html

Typically you would have a 'smart' ponent that renders for a route, and that would subscribe to the redux store and pass down the data its nested 'dumb' ponents need.

So have your smart ponent(s) subscribe to the state change of the favorites array and pass it down as a prop to the ponents that need it.

It's all right to listen to one action in more than one reducer, so maybe go down that route?

Do your ponents share mon parent ponent? If they do, connect it to your redux app state and pass favorite ids array down to each one; then dispatch action addFav or removeFav from any ponent, react in favorites reducer and see redux passing new props to react ponents.

I think you should first understand about smart and dumb ponents in reactjs, here is the link, so you will be having a single smart which connects to you reducer and updates your child(dumb) ponent.

If you still wants to have two reducers, you can have a action which executes its operation as a result it calls another action. to achieve this you need to have a redux-async-transitions, the example code is given below

function action1() {
 return {
  type: types.SOMEFUNCTION,
  payload: {
   data: somedata
  },
  meta: {
   transition: () => ({
    func: () => {
     return action2;
    },
    path : '/somePath',
    query: {
     someKey: 'someQuery'
    },
    state: {
     stateObject: stateData
    }
   })
  }
 }
}