redux-saga middleware

redux-saga is a third-party JavaScript library that helps to easily and efficiently manage an application's side effects, including asynchronous activities such as fetching data and accessing browser cache. 

Mukhiya and Hung outline the essential importance of using redux-saga in a web application. We can use the image used in this paper as a reference to better understand the need for redux-saga. To explain it in one sentence, we can say that redux-saga is responsible for handling side effects. Saga uses ES6 Generators (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) to make asynchronous flows easy to read, write, and test. If you are not familiar with generators, it would be best to pause before the next section and read up on them. Here is a couple of suggested articles: https://redux-saga.js.org/docs/ExternalResources.html.

Basically, generators are functions that provide the flexibility to be paused and resumed rather than executing all the statements in one pass. yield in a generator represents an asynchronous step in a more synchronous process, and is analogous to await in an async function:

Figure 6.1: The logical model of the single page architecture using Redux-Saga [1]

Redux Saga provides us with the async dispatch which ensures HTTP requests will not clutter up the execution flow. Redux Saga creates all the logic of event stream processing. Saga runs in the background right after the app is launched and observes all the actions that the store dispatches. Once it finds that the correct actions have been dispatched, it listens to them and performs any necessary asynchronous activities, such as fetching data or deleting data from the backend by calling the API layer. For example, in the preceding diagram, once Saga observes that the DELETE action been dispatched, it will call the API with the correct payload to delete the doctor. The reducers take in the types of the actions and update the store's data, which in turn are reflected in the actional DOM [1].

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset