How to wait for 2 actions to dispatch another? - Redux Saga

#redux #sagas #react #javascript

In some situations, you may want to dispatch an action only after 2 actions have been dispatched in redux-saga, next I will explain step by step how to get this.

First, I will explain the scenario:

Imagine that we have a component called Counter, and it has a button to multiply a value.
A value should be multiplied only when action A followed by action B has been dispatched in order.
If the aforementioned in the previous point is not fulfilled, the action C (multiply action) is not dispatched.

The Counter component has the next signature.



//Counter.js
const Counter = ({ value, initialAction, multiply }) => (
  <div>
    Current Value: {value} times{" "}
    <button onClick={initialAction}>Action A</button>{" "}
    <button onClick={multiply}>Action B</button>
  </div>
);

Counter, has 2 buttons, the first one will be used to dispatch an initial action to process into a saga, then it will dispatch the FIRST ACTION, as shown in the following code.



//sagas.js
import { put, takeLatest, take } from "redux-saga/effects";

export function* initialSaga() {
  // side-effects (http calls)...
  yield put({ type: "FIRST_ACTION" });
}

export function* multiply() {
  // do other things...
  yield take(["SECOND_ACTION"]);
  yield put({ type: "MULTIPLY" });
}

export default function* rootSaga() {
  yield takeLatest("INITIAL_ACTION", initialSaga);
  yield takeLatest("FIRST_ACTION", multiply);
}

The magic occurs in multiply generator function, because it will wait until SECOND_ACTION is dispatched to continue and dispatch a MULTIPLY action.



 yield take(["SECOND_ACTION"]);
 yield put({ type: "MULTIPLY" });

So, when second button (multiply) is clicked, SECOND_ACTION action will be dispatched and multiply generator will continue from the line where it ended previously.

Graphically follow the following order.

By the way, the multiplication is done inside a reducer.



//reducer.js
export default function counter(state = 1, action) {
  switch (action.type) {
    case "MULTIPLY":
      return state * 2;
    default:
      return state;
  }
}