React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

In this course we are going to take an empty React and Redux application and add Redux Saga side effects. We’ll begin by installing saga to the app and implement a basic saga generator function. We’ll explore the saga commands provided by Redux Saga and what the difference is between blocking and non-blocking actions. 

We will also understand how to concurrently run sagas with saga helpers and how we wire everything up with the Redux store. Finally, we’ll finish up by implementing tests for our sagas.

In this lesson we’ll fetch the star wars api and display the response to our UI. Saga effects and generators allow us to synchronously run asynchronous tasks.  

Handle Side Effects with Redux Saga Generator Functions

We’ll dive into takeLatest, a saga helper that gives us the ability to control when our saga generator functions are called. We’ll then wire up takeLatest with our saga middleware and add it to the store.

Control when Saga Generators are Called with TakeLatest

When some side effects depend on the return of other side effects, we need to stop or block the iteration through our sagas until these resolve. We control this stop and go pattern with blocking effects, such as call and take.

Implement Synchronous Side Effects with Blocking Saga Effects

When we need to run side effects and do not care about a return value, we should use non-blocking effects. This way we can iterate through our sagas as efficiently as possible. Some popular non-blocking effects are put and fork.

Implement Asynchronous Side Effects with Non-Blocking Saga Effects

Most applications require multiple side effects. So in this lesson, we’ll modify our TakeLatest to accept more than one saga, as well as add another saga helper called TakeEvery.  

Run Sagas Concurrently with Saga Helpers

In this lesson we will show how to handle multiple effects in a synchronous manner. Redux Saga gives us the actionChannel effect which gives us the power to queue requests. 

Create an Action Channel/Queue in Redux Saga

In this lesson we will utilize generator functions and effect objects to test our sagas. We’ll walk through different scenarios and how to test each case with Jest. 

Async React with Redux Saga

Tyler Clark

Course Content