1. 30
    Redux: Extracting Action Creators
    3m 52s

Redux: Extracting Action Creators

Dan Abramov
InstructorDan Abramov
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 3 years ago

Learn how to keep code maintainable and self-documenting by extracting action creators from the components.

[00:00] So far we have covered the container components, the presentational components, the reducers, and the store. But we have not covered the concept of action creators, which you might see in the Redux talks and examples.

[00:15] Let's consider the following example. I dispatched the add todo action from inside the button click handler. This is fine. However, it references the next todo ID variable, which added there alongside the add todo component.

[00:32] Normally, it would be local. However, what if another component wants to dispatch the add todo action? It would need to have the access to next todo ID somehow. While I could make this variable global, it's not a very good idea.

[00:47] Instead, it would be best if the components dispatching the add todo action did not have to worry about specifying the ID. Because the only information they really pass is the text of the todo being added.

[01:00] I don't want to generate the ID inside the reducer, because that would make it non-deterministic. However, I can extract this code generating the action object into a function I will call add todo.

[01:15] I pass the input value to add todo. Add todo is just the function that takes the text of the todo and constructs an action object representing add todo action. It has the type, add todo, it takes care of generating the unique ID and it includes the text.

[01:36] Although extraction such functions is not required, it is very common pattern in Redux applications to keep them maintainable, so, like all these functions, action creators, and we usually place them separately from components or from reducers.

[01:53] I will now extract other action creators from the components. I see that I have it set visible to filter the dispatch there, so I will change this to call this set visible the filter action creator with own props filter as the argument and is going to return the action that needs to be dispatched, so I'm declaring this set visible to filter function.

[02:17] This is what I call an action creator, because it takes the arguments about the action and it returns the action object with the type set visible to filter and the filter itself.

[02:30] You might think that this kind of code is boilerplate and you'd rather dispatch the action in line inside the component. However, don't underestimate how action creators document your software, because they tell your team what kinds of actions the components can dispatch, and this kind of information can be invaluable in large applications.

[02:54] I will now scroll down to the last place where I call dispatch with an inline action object. I will now extract that to add toggle todo action creator, to which I pass the ID of the todo as the argument.

[03:10] I'm now scrolling up to my action creators and I will add a new one that I call toggle todo. It accepts the ID as the argument and it returns the action of the type, toggle todo, and this ID.

[03:24] Let's take a moment to consider how convenient it is to have all the action creators in a single place so that I can use them from components and tests without worrying about the action's internal structure.

[03:38] Know that whether you use action creators or not, the data flow is exactly the same, because I just call the action creator to get the action object and then I call dispatch just like I did before, passing the action.

Jordan
Jordan
~ 8 years ago

Thx for the great tutorial series! Was educational w/o being overwhelming - Russian accent was cool to listen to as well.

Jacob
Jacob
~ 8 years ago

I find myself learning a new javascript framework and worrying about the css.

https://jsbin.com/pebesisaqi/edit?html,css,js,output

Brandon
Brandon
~ 8 years ago

Awesome series, thanks for taking the time to make it!

Henry Ventura
Henry Ventura
~ 8 years ago

Wow. Incredible. THANK YOU!

~ 8 years ago

Very fast paced videos. I really like seeing Dan write the code for some of the objects that are in the Redux eco-system.

For those looking for a project that utilizes all these concepts in a more complex example then the ToDo, you might want to look at my Snowflake project: https://github.com/bartonhammond/snowflake - It's more complex then a Todo but not so much that you can't wrap your head around it.

Vladimir Makushev
Vladimir Makushev
~ 8 years ago

Just awesome, Dan! Thank you.

Propellio
Propellio
~ 8 years ago

This was a wonderful and very instructive series. I really liked the approach where you implement stores and reducers via plain JS so we can see what's going on under the hood. Such simple, yet so powerful concepts. Hope you make more videos/series on React/Redux. Cheers.

Maxi Ferreira
Maxi Ferreira
~ 8 years ago

Fantastic series. I now feel I'm not only a better Redux developer, but also a better React developer.

Andrew Mead
Andrew Mead
~ 8 years ago

I had no idea why I'd want to use Redux when I started this course. This course really made it easy to understand the how & why of redux. Thanks Dan!

~ 8 years ago

Thanks Dan and Egghead! This course was FANTASTIC!

Dan has an incredibly relaxing voice, and I noticed that he made very few, possibly NO errors at all while typing. Kind of amazing!

ysfzrn
ysfzrn
~ 8 years ago

Thanks for this excellent tutorial. Dan is amazing developer or creator.

Stefan
Stefan
~ 8 years ago

That was very helpful! Thank you very much!

Alexander Hofstede
Alexander Hofstede
~ 8 years ago

Well done, learned a lot. Might be useful to add one more; refactoring the whole thing to separate files and recommended project/folder structure?

Abdo
Abdo
~ 8 years ago

Check out Stephen Grider's starter https://github.com/StephenGrider/ReduxSimpleStarter . He also has examples for his Udemy course (which I took) at https://github.com/StephenGrider/ReduxCasts

Ojassvi
Ojassvi
~ 8 years ago

Thanks Dan for the excellent walk through Redux. This helps me understand the flow of data and how to think of the application.

Sequoia McDowell
Sequoia McDowell
~ 8 years ago

Series was great, thanks for making it! Feedbacks:

  1. Would be helpful if you highlighted places where you're doing it "wrong" but planning to rewrite it later. I struggled to understand how calling getState from render was a good idea (these frameworks are new to me so there's a lot I don't understand), only to find out that in fact that isn't a good idea & you fix it later. Big red "We're going to fix this!" note on those would help me sort out what's confusing cuz it's new from what's confusing cuz it is in fact wrong.
  2. Would love to see one or two short vids at the end breaking the application code out into a typical react/redux structure (do you group all actions in a file? etc.).
Dan Abramov
Dan Abramovinstructor
~ 8 years ago

Would be helpful if you highlighted places where you're doing it "wrong" but planning to rewrite it later. I struggled to understand how calling getState from render was a good idea

Good feedback, thanks!

Would love to see one or two short vids at the end breaking the application code out into a typical react/redux structure

I don’t have any specific file structure to suggest because I think it really depends on the app and the team, and people will repeat whatever I say even if it’s bad. So I’d rather not have any opinion at all about this.

Frederic Rey
Frederic Rey
~ 8 years ago

Thanks for this course!

Nick Janssen
Nick Janssen
~ 8 years ago

Very helpful tutorial series. I'm happy that you took the time to explain it at a slow pace, and summarize what happened in each lesson to really make people understand well. Thank you, I look forward to more!

Ryan Wang
Ryan Wang
~ 8 years ago

Thanks for the excellent series, really appreciate it .

Mauro Carrero
Mauro Carrero
~ 8 years ago

Great stuff, thanks Dan.

Eduardo  Cancino
Eduardo Cancino
~ 8 years ago

Could you add a video explaining how to integrate data from service and having an store that handles CRUD?

Zane Mattingly
Zane Mattingly
~ 7 years ago

Great course, really helped me solidify my understanding of both Redux and React. Especially appreciated the illustration of the core Redux methods by breaking them down into vanilla JavaScript. Thanks!

Tomás Francisco
Tomás Francisco
~ 7 years ago

About error handling thought redux... What is the best approach to deal with errors? Like async errors. Is a global or a scope/component handler?

Sai
Sai
~ 7 years ago

It was great Dan, Thanks a lot for this, I can't even type this message without using the backspace and I see you wrote the whole application without using the backspace even once. Pace was perfect and best part was how you wrote a native app and then improvised it.

But one thing i am not clear with is, you said not use context as it has changed earlier and will again. Then what is the best way to pass data ?

Laurie
Laurie
~ 7 years ago

This course was awesome. Lots learned, lots or re-watching to really digest it and now a lifetime of application to master :D

Andres
Andres
~ 7 years ago

Great lessons. Thank you very much. Priceless!!

Claire
Claire
~ 7 years ago

Great Lessons on Redux.

Question: wouldn't the nextTodoId be in store (instead of the actionCreator) and updated by reducer ADD_TODO after the new entry is pushed to the array? So the store changes the todo array and increments the nextTodoId on add action. It's deterministic if the nextTodoId is part of the state, no?

Aman
Aman
~ 7 years ago

This series has been the best tech learning experience ever, I feel others should also learn from the approach used to explain concepts. Thanks.

Ferdinand
Ferdinand
~ 7 years ago

This was a terrible series. Why dump everything into a single file and there is way too much refactoring and unnecessary over-complication.

If you left feeling a little overwhelmed and confused try this tutorial:

https://www.udemy.com/react-redux/learn/v4/

Much better explained.

Zeyu Wang
Zeyu Wang
~ 7 years ago

Great course! Dan, thank you!

Logan
Logan
~ 6 years ago

I wish you would have added another episode where you went over everything again and how things connect. Also a video on separating this one file into multiple files would be helpful as well. Learned a lot

Gary
Gary
~ 5 years ago

bad coding style to use the same name for several things, with only a difference in case or adding an 's', example AddTodo => addTodo Todo => todos ......This is a very bad style, and shouldn't be used even for demos, remember the next guy looking at your code will have trouble remembering the difference between the names.

Timi Tejumola
Timi Tejumola
~ 5 years ago

Thank you, Dan. What a great course!. I love how you explain what happens under the hood of Store, CombineReducers and Provider Component.

Simran
Simran
~ 5 years ago

Good stuff. Well explained. Thanks Dan.

Markdown supported.
Become a member to join the discussionEnroll Today