What are the differences between call() and put() in redux-saga?

Both call() and put() are effect creator functions. call() function is used to create effect description, which instructs middleware to call the promise. put() function creates an effect, which instructs middleware to dispatch an action to the store.

call() is a blocking effect, which means that the saga will wait for promise resolving before moving on to the next step.

put(), on the other hand, is a non-blocking effect, which means that the saga can continue to the next step and action will be dispatched within internal scheduler.

Let's take example of how these effects work for fetching particular user data.

function* mySaga() {
// Dispatch an action to the store using put()
yield put({ type: "MY_ACTION" });
// Call a function and wait for the result using call()
const result = yield call(myFunction, "some argument");
// Dispatch another action to the store using put()
yield put({ type: "ANOTHER_ACTION", payload: result });
}

In this example, the saga first dispatches MY_ACTION to the store using put(), and then calls the myFunction function and waits for the result using call(). Finally, it dispatches ANOTHER_ACTION to the store, passing the result of myFunction as the payload.


August 16, 2022
9821