1. 1
    Redux: The Single Immutable State Tree
    2m 11s

Redux: The Single Immutable State Tree

Dan Abramov
InstructorDan Abramov

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 2 years ago

How is Redux different from Backbone or Flux? Learn the first principle of Redux—the single immutable state tree.

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.

[00:00] The first principle of Redux is whether your app is a really simple one like this counter example, or a complex application with a lot of UI, and change of state, you are going to represent the whole state of your application as a single JavaScript object.

[00:18] All mutations, and changes the state in Redux are explicit. It is possible to keep track of all of them. In this case, I am logging every state change in the application in the console. You can see that, in the counter example, there isn't really much state to keep track of so it can be represented by a JavaScript number.

[00:43] Here is a different example, a list of independent counters that I can add and remove. In this case, a single number is not enough to represent the state of the application, so we use an array of JavaScript numbers. In a more complex application, there is more state to keep track of.

[01:03] This is a typical to-do app, where I can add to-dos, I can cross them as completed ones, and I can change their current filter. Looking back at the history of the state changes, we can see that the initial state of the app was a JavaScript object, containing an array under the to-do string, and a string seen show all, under visible, the filter.

[01:28] When I added the first to-do, it was added to the to-dos array, inside our state object. The to-do itself, is described by a plain child script object, saying it was not completed, and the text was saved. Every further change that the app, whether when I was crossing out the to-dos, or when I changed the visibility filter, resulted in this change to this state object, described in our whole application.

[01:58] Now you know the first principle of Redux, which is that, everything that changes in your application, including the data and the UI state, is contained in a single object, we call the state or the state tree.

Sunny Chung
Sunny Chung
~ 6 years ago

How does redux handle applications a huge number of items/depth in the state tree? Is a single tree recommended for all cases?

Dan Abramov
Dan Abramovinstructor
~ 6 years ago

Nothing is ever recommended for all cases. Profile it with the load imitating what you expect in your app and evaluate whether it works for your use case.

Please see also http://redux.js.org/docs/FAQ.html#performance-state-memory

nortal
nortal
~ 6 years ago

Does Redux require React to be used or was it used for this example? I read, that it should be independent.

Alex
Alex
~ 5 years ago

What is meant by "All mutations and changes to the state are explicit"? What would a non-explicit (implicit?) state mutation look like and how is Redux different to that?

Jeremy Levett
Jeremy Levett
~ 4 years ago

what editor are you using thanks?

Brian Schaper
Brian Schaper
~ 4 years ago

It looks like jsbin