Relx reduction reaction action

Question

I am new to the reaction-reduction world and have some problems visualizing part of a complex data stream (I think).

Suppose a state contains a collection of tracks and an array of favorite tracks. A user may like a track from several different components, for example. the music player, tracklist, charts, and everyone else should have rebooted.

I am currently running an action to add / remove track ID to / from my favorites array. But I can’t figure out how to proceed from there.

My plan is to trigger another action, for example. trackItem reducer for listening and continuing. Or can each related component directly subscribe to a collection of favorites? Or do I have two gearboxes that listen to the same action? Now I have an idea how to implement something similar, and also I have a feeling that I'm on the wrong track.

I feel that I am trying my best to get rid of my puppet magic habits. How do you do this?

My other plan is to have isFavorited boolean in the json track element and use action / reduce to update / switch this property. I understand that normalizr will merge instances with the same identifier, so any component that subscribes to its changes will respond.

Answer 1

Or each related component can directly subscribe to a favorite collection of changes

They could. But do all of these components have a common component? If so, I would like this parent component to subscribe to the state change of the favorites array and pass it as a props for the components that need it.

I would recommend really reading through redux docs: https://rackt.imtqy.com/redux/

Specifically, use with React: https://rackt.imtqy.com/redux/docs/basics/UsageWithReact.html

, "" , , redux , "" .

, , .

Answer 2

, reactjs, , , () .

, , , . redux-async-transitions,

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

Answer 3

, , , ?

? , connect redux ; addFav removeFav , favorites , .