Introduction to Redux-Saga

Introduction

In this article I am going to introduce you to redux-saga [1]. Redux-saga is a library that aims to manage application side effects.






The mental model is that a saga is like a separate thread in your application that's solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well [1].

It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. I thoroughly recommend you to read more about generators before getting into sagas.

Workshop

Well, we are going to implement a simple application using redux-saga this time. The basic scaffolding of our app once built would be like this.



You may find the source code of this project on github [2]. Let me just show you the sagas first. Here’s the code for our sagas.


It uses ES6 generators to pause and resume the execution allowing other code to run during these paused periods. Here we create a Saga that watches for all STUDENTS_FETCH_REQUESTED actions and triggers an API call to fetch the students data.  When it is successfully completed, it dispatches STUDENTS_FETCH_SUCCEEDED action. Upon failure, it merely dispatches STUDENTS_FETCH_FAILED action to the store.

To run our Saga, we'll have to connect it to the Redux Store using the redux-saga middleware. Here’s the code snippet responsible for that.


Also note that here we mount the saga middleware on the store. Now our actions looks like this.


See how pure our actions are. They are now free from any side effects. This is much more easier to test since mocking is not needed.

Summary

In this session we covered a lot of ground about redux-saga. You might've used redux-thunk before to handle your data fetching. Contrary to redux thunk, you don't end up in callback hell, you can test your asynchronous flows easily and your actions stay pure. Redux observable [3] is a similar library which handles side effects using Rx-JS.

The most important advice I can give is not to bring in either of these libraries before you need them. If you're only making simple ajax calls, you probably don't need them. redux-thunk is stupid simple to learn and provides enough for the basics, but the more complex the async the harder (or even impossible) it becomes for redux-thunk. But for redux-saga or redux-observable in many ways it shines the most the more complex the async is. [4]


References

[1] https://github.com/redux-saga/redux-saga
[2] https://github.com/ravindraranwala/redux-saga-demo
[3] https://redux-observable.js.org/
[4] https://stackoverflow.com/questions/40021344/why-use-redux-observable-over-redux-saga
[5] https://davidwalsh.name/es6-generators





 

Comments

Post a Comment

Popular posts from this blog

Introducing Java Reactive Extentions in to a SpringBoot Micro Service

Image
Introduction Today we are going to take a look at Reactive Programming using Java8 and RxJava, which is a library for composing asynchronous and event-based programs by using observable sequences. RxJava stands for Reactive Extensions for the JVM. It extends the observer pattern [Gamma95] to support sequences of data/events and adds operators that allow you to compose sequences together declaratively while abstracting away concerns about things like low-level threading, synchronization, thread-safety and concurrent data structures [1]. Pre-Requisites : Having a good knowledge about Java8, Functional Programming and spring boot microservices. What is Reactive programming? In essence, Reactive programming is an asynchronous programming paradigm concerned with data streams. The system time, a list of entries from the DB/API, user clicks, everything can be a stream of data. Data from different streams can easily be combined and transformed, and in the end processed/observed by the
Read more

Optimal binary search trees

Image
Suppose that we are designing a program to translate text from English to French. For each occurrence of each English word in the text, we need to look up its French equivalent. We could perform these lookup operations by building a binary search tree with $n$ English words as keys and their French equivalents as satellite data. Because we will search the tree for each individual word in the text, we want the total time spent searching to be as low as possible. We could ensure an $Θ(log_2 \;n)$ search time per occurrence by using a red-black tree or any other balanced binary search tree. Words appear with different frequencies, however, and a frequently used word such as the may appear far from the root while a rarely used word appears near the root. Such an organization would slow down the translation, since the number of nodes visited when searching for a key in a binary search tree equals one plus the depth of the node containing the key. We want words that occur frequently in the t
Read more

Edit distance

Image
Biological applications often need to compare the DNA of two (or more) different organisms. A strand of DNA consists of a string of molecules called bases, where the possible bases are adenine, guanine, cytosine, and thymine. Representing each of these bases by its initial letter, we can express a strand of DNA as a string over the finite set $\{A, C, G, T\}$. For example, the DNA of one organism may be $S1 = ACCGGTCGAGTGCGCGGAAGCCGGCCGAA$, and the DNA of another organism may be $S2 = GTCGTTCGGAATGCCGTTGCTCTGTAAA$. One reason to compare two strands of DNA is to determine how “similar” the two strands are, as some measure of how closely related the two organisms are. We can, and do, define similarity in many different ways. For example, we can say that two strands are similar if the number of changes needed to turn one into the other is small. [1] We formalize this notion of similarity in our Edit distance problem. 15-5 Edit distance - Problem Statement In order to transform one sour
Read more