The Complete React on Rails 5 Course

You're viewing a lesson from an old course. Click here to get access to the new version.

Introduction to Redux

In this tutorial we look at Redux, one of the most popular libraries built on the Flux pattern.

This video was part of the The Complete React on Rails 5 Course.

A new version of the course is now available

Enrol now to view this video

In this lesson we'll look at Redux, one of the most popular libraries built on the Flux pattern. 

Redux is not directly related to React.

You can use it with any view library, and that includes React. 

Redux has three main principles, which distinguish and define it from other Flux libraries. 

First, Redux only has one datastore. 

In Flux, there is no restriction on the number of stores.

In fact, the official Flux documentation says that your app must contain multiple stores.

Redux simplifies that dramatically, and puts all your app data in one store. 

The whole state of your app is stored in an object tree inside a single store. 

This means that in Redux there's one single source of truth, as far as your app's data is concerned, at any given point in time.

Second, the only way to change a state is to emit an action, which is an object describing what happened. 

Typically, an action object has a type of action, and some data. 

And finally, the way you change state is through pure functions called "reducers".

A pure function is a function which, when given a piece of data, always returns the same value.

It has no side effects.

So, reducer function takes a current state, and the dispatched action that you want to perform on that state, and returns a new state.

These are the three simple principles of Redux. 

Now, to use Redux with React,  we'll use the React Redux library, which has official React bindings for Redux, and it gives you some convenient methods, like the provider component and the connect method, which we'll look at in the next lesson. 

The provider component provides the store context to all the components in the app hierarchy. 

Then, individual components use a connect method to get data from the store.

Without this, you'd have to pass a store down the component hierarchy, to any container component that needs data.

So that's Redux in a nutshell. 

Liked this tutorial? Get more like this in your inbox