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 972 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 Single Immutable State Tree

2:11 JavaScript lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Tomasz Dyl

Hi @Dan, could you add link to the gitter IM on your redux repo: https://gitter.im/rackt/redux - it could help to grow the community. Thanks

In reply to egghead.io
Avatar
Tomasz Dyl

Hi @Dan, could you add link to the gitter IM on your redux repo: https://gitter.im/rackt/redux - it could help to grow the community. Thanks

In reply to egghead.io
Avatar
Sunny Chung

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

Avatar
Dan Abramov

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

In reply to Sunny Chung
Avatar
nortal

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

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.

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.

Numbers Showing State

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.

Multiple Counter State

This is a typical todo app, where I can add todos, 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 todo string, and a string seen show all, under visible filter.

ToDo App State

When I added the first todo, it was added to the todos array, inside our state object. The todo 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 todos, or when I changed the visibility filter, resulted in this change to this state object, described in our whole application.

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.



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