Learning Redux-Saga #javascript #reactjs #redux #redux-saga

Learning Redux-Saga  #javascript #reactjs #redux #redux-saga

  • Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state.
  • A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.
  • On the other hand, Redux-saga uses the generators which can pause, resume, and interact with the asynchronous actions by using generators.
  • Each of the following functions will return a saga effect which is an object containing instructions of what/how the action should be executed by the saga middleware.
  • takeEvery – – Resolve the effect with the result of each time that the action is received.

Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state. A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.

Redux-saga is a Redux middleware to handle side effects, mainly the asynchronous actions which change the state. A saga is a generator function that can run asynchronous actions indefinitely like a thread in the application.

Async and await functions are used to handle the asynchronous requests as well but they can’t intercept the asynchronous actions other than waiting for them to finish. On the other hand, Redux-saga uses the generators which can pause, resume, and interact with the asynchronous actions by using generators.

Other than the full control of the side effects, the biggest advantage of redux-saga is the ease of testing because each step in the generator is testable.

Each of the following functions will return a saga effect which is an object containing instructions of what/how the action should be executed by the saga middleware.

call(function, function arguments)

Call a function with the function arguments and return the result.

take(action_type, callback)

Suspend the generator until the specified action is dispatched by the reducer.

takeEvery

Resolve the effect with the result of each time that the action is received.

takeLatest

Resolve the effect with the result of last time when the action is received.

put(action, data)

dispatch an action with the data to update the store.

select(key)

Retrieve the data in the state for the specified key.

Learning Redux-Saga