Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Redux: The Reducer Function

1:54 JavaScript lesson by

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Avatar
Elia

Supposing to have a complex state like Clients and Invoices.
Every list page is paginated, so i don't store all the state of Clients and Invoices, but only what is shown in current page.
I also need to store the current invoice or client when is edited. Because a user can edit a client that is not shown in the index page (simply entering the id in url).
Accordingly with this, is correct this state? Or there is a better way to store something like that?

Invoices {
list: [
{
_uid: 1,
date: '2016-02-10'
},
{
_uid: 2,
date: '2016-02-09'
}
],
pagination: {
currentPage: 1,
items: 10,
count: 100
},
current: {
_uid: 1,
date: '2016-02-10'
}
},
Clients {
list: [
{
_uid: 98,
name: 'John'
},
{
_uid: 99,
name: 'Sam'
}
],
pagination: {
currentPage: 10,
items: 10,
count: 100
},
current: {
_uid: 1,
name: 'John'
}
}

Avatar

Looks like jsbin is not properly running the examples.

Avatar
Christopher

I've found all Dan's videos in this series really clear, comprehensive, and extremely helpful in learning Redux. I particularly love this one though because, to me, it sounds like the narration from a movie trailer or opening theme to a TV show - the way he spends the whole video describing a reducer function only to tell you that it's called a reducer function at the very end. It feels like The Reducer should be a movie starring Denzel Washington or Liam Neeson in the vein of The Equalizer. (To be read like the Six Million Dollar Man intro) "Application state - data in memory - a collection barely manageable. Gentlemen, we can refactor it. We have the technology. State will be better, stronger, faster!"

You might have heard that the UI or the view layer is most predictable when it is described as a pure function of the application state. This approach was pioneered by React but is now being picked up by other frameworks, such as Ember and Angular.

The Reducer

Redux complements this approach with another idea, that the state mutations in your app need to be described as a pure function that takes the previous state and the action being dispatched and returns the next state of your application.

Inside any Redux application, there is one particular function that takes the state of the whole application and the action being dispatched and returns the next state of the whole application. It is important that it does not modify the state given to it. It has to be pure, so it has to return a new object.

Even in large applications, there is still just a single function that manages how the next state is calculated based on the previous state of the whole application and the action being dispatched. It does not have to be slow.

Large App Example

For example, if I change the visibilityFilter, I have to create a new object for the whole state, but I can keep the reference to the previous version of the todos state, because it has not changed when I changed the visibilityFilter. This is what makes Redux fast.

Now you know the third and the last principle of Redux. To describe state mutations, you have to write a function that takes the previous state of the app, the action being dispatched, and returns the next state of the app. This function has to be pure. This function is called the Reducer.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?