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 1072 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: Describing State Changes with Actions

2:54 JavaScript lesson by

You will learn how Redux asks you to describe every change in the application state as a plain JavaScript object called “action”.

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

You will learn how Redux asks you to describe every change in the application state as a plain JavaScript object called “action”.

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
Matt

The JS Bin example for this portion of the lesson doesn't seem to load.

Avatar
Joseph

I am experiencing the same issue.

In reply to Matt
Avatar
Olga

what's the purpose for of store.dispatch(action) inside of const dispatch?

In reply to egghead.io
Avatar
Stephen

JS Bin not working. Shame because that's what gives the courses such value.

Avatar
Priyanka Malviya

Is it working now Stephen?

In reply to Stephen
Avatar
Vinicius

The JS Bin code is not working for me as well. The only warning that I have on the console is "Processor is not ready yet - trying again".

Avatar
pedromuller

The JS Bin code is not working for me as well. The only warning that I have on the console is "Processor is not ready yet - trying again". [2]

The second principle of Redux is that the state tree is read only. You cannot modify or write to it. Instead, anytime you want to change the state, you need to dispatch an action.

An action is a plain JavaScript object describing the change. Just like the state is the minimal representation of the data in your app, the action is the minimal representation of the change to that data.

Describing Actions

The structure of the action object is up to you. The only requirement is that it has a type property, which is not undefined. We suggest using strings, because they are serializable.

In different apps, you're going to have different types of actions. For example, in a counter app we only have INCREMENT and DECREMENT actions. We don't pass any additional information, because this is all that is needed to describe these changes.

But say, for a counter list example, we have more actions. We have ADD_COUNTER action, we have a REMOVE_COUNTER action, and anytime I change the individual counter, you can see that the INCREMENT and the DECREMENT actions now have index. Because we need to describe which particular counter was changed.

Multiple Actions

This approach scales well to medium and complex applications. Anytime I add a todo, the components don't really know how exactly it's been added. All they know is that they need to dispatch an action with a type, ADD_COUNTER, and the text of the todo and a sequential id.

If I toggle a todo, again, the components don't know how it happens. All they need to do is to dispatch an action with a type, TOGGLE_TODO and pass in the id of the todo I want to toggle.

Complex Example

The same is true for the visibilityFilter. Anytime I click on this control to change the currently visible todos, what really happens is this component dispatches an action with a type, SET_VISIBILITY_FILTER, and pass in the desired filter string, filter field.

But these are all plain objects, describing what happens in a app.

Now you know the second principle of Redux -- the state is read only. The only way to change the state tree is by dispatching an action. An action is a plain JavaScript object, describing in the minimal way what changed in the application. Whether it is initiated by a network request or by user interaction, any data that gets into the Redux application gets there by actions.



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