1. 4
    Redux: The Reducer Function
    1m 54s

Redux: The Reducer Function

InstructorDan Abramov

Share this video with your friends

Send Tweet

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.

Elia
Elia
~ 5 years ago

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

~ 5 years ago

Looks like jsbin is not properly running the examples.

Christopher
Christopher
~ 4 years ago

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

AuroreM
AuroreM
~ 3 years ago

In this course you said that the reducer should not modify the previous state and I don't fully understand why. Could you explained it a bit further please ?

Many thanks !

Enoh Barbu
Enoh Barbu
~ 3 years ago

A reducer is a function that will receive all the the further actions and it will reduce the state (generate a piece of state) based of its definition: action type and the action payload (new data). So that is why it is called reducer...

Dmitriy Beglov
Dmitriy Beglov
~ 3 years ago

Hello,

When I tried to open the Plunker in a separate browser tab (from the "Code" tab) the Plunker said that the demo was not found (http://take.ms/QqxW3).

Could you please help me.

Zone Chen
Zone Chen
~ 2 years ago

In this course you said that the reducer should not modify the previous state and I don't fully understand why.

I guess because it pure function won't change any thing( including previous state ), make the action predictable and also the change along the way can be traced.

shiva kumar
shiva kumar
~ 2 years ago

Hello Dan, what editor are you using in the videos? please advise