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

Combining the emissions of multiple Observables together using RxJava Zip operator in a Spring Boot Micro service

Image
Introduction Well, today we are going to discuss an advanced RxJava operator called Zip. Let’s first take a look at the zip operator at a glance and then move on to a real world example that leverages the capabilities of the operator. In fact, zip is a very powerful and useful operator provided in the RxJava library. Prerequisites : Good knowledge of Java8, Functional Programming, RxJava, Spring Boot, Microservices. User Level : Advanced Since this is an advanced article, I am not going to walk you through the basics of RxJava or Spring Boot microservices. If you need to get some basic understanding of RxJava, I thoroughly recommend you to go through one of my previous blog posts [1] [2] or any other good introductory article about RxJava. If you need to learn more about Spring Boot microservices please go through some of the spring tutorials which are really comprehensive and impressive. RxJava Zip Operator Combines the emissions of multiple Observables together via a speci...
Read more