CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
Ernest Jones
Ernest Jones

Reputation: 584

Chain redux store update

I would like to dispatch an action after a first one has been processed by the reducers.

Here is my use case. My component allows the user to select a list of notes (this list is store in redux). Based on some user actions, a random note can be selected from this list and saved in the store.

enter image description here

In the screenshot you can see buttons. "Select All" and "Unselect All" act on the list of possible note. "Start" pick a note from the list.

The issue I have concern the "reset button". It is supposed to chain "select all" and "start" and I don't know how to do that. I tried a naive:

const reset = function () {
  dispatch(selectAll());
  dispatch(pickANote());
}

With this example, I am facing what I think is a data race. The second action pick a note from a note updated list.

Digging the internet, I found only cases of action chaining based on API calls with redux thunk. The problem I have is that I don't know how to trigger something when a action is processed (which is obvious with an API call)

So, there is 3 solutions:

Any help is welcome.

Upvotes: 0

Views: 190

Answers (1)

Ernest Jones
Ernest Jones

Reputation: 584

Alright, I found my answer.

No surprise, I was thinking anti-pattern.

In the redux style guide, there is 2 points that lead me to the solution.

  1. It is strongly recommended to dispatch one action that is processed by several reducers.
  2. It is strongly recommended to put the logic inside the reducers.

The consequence is that I should dispatch "raw data" and then compute value reducers. Following this path, I am not dependent on the values already in the store for the next updates and so, I do not face any data race.

Upvotes: 1

Related Questions