In ReactJS How/where Do I Trigger An Action That Performs An Async Get, On Account Of Another Action Occurring?

- 1 answer

I have a react question I need help with. I'm using fluxxor for flux and in my ui I have a list the user can select from which will update a table based on the selection made.

So I have a Store with the list selection and table data. I invoke a ItemSelectedFromList action which is listened to by the store to update its stored selection value and the ui rerenders showing the updated selection in a token on screen.

I need to invoke another action to update the table based on this selection store value changing which will async fetch data and dispatch a DataLoaded action the store when its done. This DataLoaded action is dispatched a the stores table data is updated and the view will rerender with the new table info.

The question I have is where should I invoke this second action to update the table after the store has updated the selection value?

Can a store invoke another action? What's the best practice?

My component that renders the table and selection token is just getting these props from the parent component via fluxxor getStateFromFlux which fetches the info from the stores.

Should I add a needToUpdateTable flag in the store and have parent component invoke the action when its true in the getStateFromFlux method?

Any help is appreciated.



I'm sure you can but I don't how you would do it in Fluxxor.

I think it's totally okay for an action to call other actions that fetch data and in fact, that's exactly what is done in libraries like Redux.

One example. I want to fetch songs from a server, I would dispatch the action fetchSongs() and this action would dispatch action on behalf of me like so:

  • I dispatch action fetchSongs()
  • action requestSongs() is dispatched on behalf of me
  • Make AJAX call
  • AJAX call returns
  • action receiveSongs() is dispatched on behalf of me