RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.

redux-observable

Learn Redux-observable

Handling async actions that affect your application’s state sounds like a tall order, but Redux makes it possible — and a win-win for you and your app’s users.

In this course, we will begin with nothing more than an empty directory and a text editor. Through small, focused lessons, we’ll learn how to set up a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store.

With an understanding of how things work, we’ll move onto solving common problems like: 
- Ajax cancellation
- creating sequences of async actions
- enabling code reuse through higher-order Observables 
- and much more.

Asynchronous State Management with redux-observable v1

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

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

Up and Running with redux-observable

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 lesson we’ll learn exactly what’s needed to incorporate redux-observable into an existing React/Redux application. We’ll learn what ‘Epics’ are, and how they receive a stream of actions and return a stream of actions. In-between is where we get to apply side-effects, call out to external services etc etc. In this lesson we’ll demonstrate the ‘async’ nature of epics by responding to an action with another, delay action.

Add redux-observable to an existing Redux project

In this lesson we’ll learn how to perform an Ajax request to an external API in response to an action in the redux store. We’ll see how, within the epic, we get access to actions after any reducers have been executed and how we can convert that incoming action into a resulting one that will save the data received into the redux store.

Use redux-observable for simple Ajax requests

With redux-observable, we have the power of RxJS at our disposal - this means tasks that would otherwise be complicated and imperative, become simple and declarative. In this lesson we’ll respond to an action by queuing up 2 separate Ajax requests that will execute sequentially. Then we’ll group the results from both into an array and produce a single action from our epic that will save the data into the redux store

Create a queue of Ajax requests with redux-observable and group the results.

When accepting user input and converting it into a request that talks to the outside world, we can often end up in a situation where responses are no longer relevant. This is a common case in type-ahead style input fields - we would only want to call an external search API after the user has stopped typing for a short amount of time. In this lesson we’ll see how we can begin to combine RxJS operators to solve such problems. 

Debounce user input to avoid repeated Ajax requests

Any application that uses external services such as APIs should be able to handle errors gracefully. Often this requires no more that displaying a message to the user and ensuring the application continues to function. In this lesson we’ll look at how we can convert an error from the network into an action that is dispatched into the Redux store, allowing us to show an error message to the user and prevent the application from crashing.

Handle network errors gracefully

Although ‘epics’ in RxJS are often described as ‘actions in, actions out’, there may be times when you need to ‘bail out’ of an action, or to just ignore the current one given some condition. By learning about RxJS’s `filter` Operator, we’ll see how easy it is to do ‘nothing’ when you need to. We’ll also see how the composition techniques available in RXJS allow us to control the UI in a declarative manner.

Filter a stream to exclude empty values

In certain situations, you care more about the final state of the redux store than you do about the particular stream of events coming out of an epic. In this lesson we explore a technique for dispatching actions direction into the store, having the epic execute as they would normally in production, and then assert on the updated store’s state.

Use tests to verify updates to the Redux store

In this lesson we’ll learn exactly what’s needed to incorporate redux-observable into an existing React/Redux application. We’ll learn what ‘Epics’ are, how to register & combine them - and finally how to create the Redux Middleware that ties it all together

Being just another redux-middleware, we can take advantage of existing tools created by the large redux community. Arguably the most valuable & popular amongst these is the rev-tools extension that allows visibility into the lifecycle of the redux store.
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en


Debug redux-observable with redux dev-tools

It’s a common case that a page in your application will require some initial data before it can show anything useful. In this lesson we learn that ‘epics’ in redux-observable are just functions that return Observables. Mostly we see epics that begin as a filter on the incoming stream of redux actions, but in some cases this is not suitable and you might need to just have something running immediately, regardless of user input.

Immediately fetch data from an API on page load

In this lesson we’ll learn how to perform an Ajax request to an external API in response to an action in the redux store. We’ll see how, within the epic, we get access to actions after any reducers have been executed and how we can convert that incoming action into a resulting one that will save the data received into the redux store.


 Fetch data on demand from an API

This lesson covers a very common use-case: your application needs to make an ajax request for some data, but in order to construct the url or payload you need some input from the user first. We’ll see how we can extract data from a text input, dispatch it as an action, and then use that data in an Epic to construct a valid URL.


Create an Ajax request from User Input 

Debounce user input to avoid repeated Ajax requests 

Filter actions to exclude empty values

Sometimes you need to cancel a pending request based on an action performed by the User. In this lesson we’ll see how we can stop an in-flight ajax request by dispatching another action into the store and making use of the Rx operator ‘takeUntil’.

Use an action to cancel an Ajax Request

The core benefit of RxJS is the ability to compose side-effecting code in creative ways. This lesson shows an example where we can cancel a pending networking request by *either* a regular action, or by a keyboard event such as pressing the ESC key.

Combine keyboard events with regular actions

There are many examples where you may need to access values from the store within your epic. Accessing user state, or options & configurations - the use-cases are endless. Redux-Observable provides a `state$` observable as the second parameter to every epic that gives you access to the entire store in both an imperative style, and a more reactive one. Both will be covered in this lesson


Access values from the store within an epic

Sometimes we need to allow the user to add additional data to the store in order to be able to configure things, or to alter how certain functionality works. In this example we look at how we can save the value of a Select field in the store and use that same value from within an Epic to make an Ajax request to an API

Topics

Instructors

Content Type

Free or Pro

redux-observable

Asynchronous State Management with redux-observable v1

Up and Running with redux-observable

Add redux-observable to an existing Redux project

Use redux-observable for simple Ajax requests

Create a queue of Ajax requests with redux-observable and group the results.

Debounce user input to avoid repeated Ajax requests

Handle network errors gracefully

Filter a stream to exclude empty values

Use tests to verify updates to the Redux store

Add redux-observable to an existing Redux project

Debug redux-observable with redux dev-tools

Immediately fetch data from an API on page load

Fetch data on demand from an API

Create an Ajax request from User Input

Debounce user input to avoid repeated Ajax requests

Filter actions to exclude empty values

Handle network errors gracefully

Use an action to cancel an Ajax Request

Combine keyboard events with regular actions

Access values from the store within an epic

Save user input to the store and access it from an Epic