Learn Ramda, Redux-observable and Sequelize

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.

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

redux-observable

Asynchronous State Management with redux-observable v1

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

A library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

ramda

Functional Programming in JavaScript with Ramda.js

***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

In this lesson we'll see how to use the `without` function to remove items in a known list from an array. Then we'll generate our exclusion list and apply it to `without` using `reduce`, `min`, `max` and `converge` to detect the highest and lowest values in an array and creating a new array that excludes those values.

Discard the High and Low Values From an Array of Numbers with Ramda

In this lesson we'll look at how you can use Ramda's `unfold` function to generate a list of values based on an initial seed.

Create an Array From a Seed Value with Ramda's unfold

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

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 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

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where `tap` comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

Debug Function Compositions with Ramda's Tap Function

Most of the functions offered by the ramda library are curried by default. Functions you've created or that you've pulled in from another library may not be curried. Ramda's `curry` and `curryN` functions allow you to take a non-curried function and use it as a curried functions. In the case where you have a manually curried function and you want to just call it like a normal function, you can use `uncurryN` to get back a function that accepts all of the arguments at once.

Curry and Uncurry Functions with Ramda

You can really unlock the power of ramda (and functional programming in general) when you combine functions. Counting words in a string may seem like a relatively difficult task, but ramda makes it easy by providing a `countBy` function.  This lesson walks through using the `countBy` to count words in a string.

Count Words in a String with Ramda's countBy and invert

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use `over` to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

Update Component State in React With Ramda Lenses

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable `map` utility function using manual currying and then we'll replace it with Ramda's `map`.

Create a Reusable Mapping Function with Ramda's Map

In this lesson, we'll use `Promise.all` to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to convert that array of values into a single object using `zip` with `fromPairs`. Then we'll refactor to use `zipObj`.

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

We don't always control the data we need in our applications, and that means we often find ourselves massaging and transforming our data. In this lesson, we'll learn how to transform objects in a declarative way using ramda's evolve function.

Declaratively Map Data Transformations to Object Properties Using Ramda evolve

In this lesson we'll see how Ramda's `path` and `pathOr` functions can be used to safely access a deeply nested property from an object while avoiding the dreaded checks for `undefined` at each new property in the desired path. 

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Sometimes you need to filter an array of objects or perform other conditional logic based on a combination of factors. Ramda's `where` function gives you a concise way to declaratively map individual predicates to object properties, that when combined, cover the various facets of your conditions. In this lesson, we'll look at how this powerful function can be used for scenarios requiring a complex predicate function.

Topics

Instructors

Content Type