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

Redux: Extracting Action Creators

InstructorDan Abramov

Share this video with your friends

Send Tweet

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

Jordan
Jordan
~ 5 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
~ 5 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
~ 5 years ago

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

Henry Ventura
Henry Ventura
~ 5 years ago

Wow. Incredible. THANK YOU!

~ 5 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
~ 5 years ago

Just awesome, Dan! Thank you.

Propellio
Propellio
~ 5 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
~ 5 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
~ 5 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!

~ 5 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
~ 5 years ago

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

Stefan
Stefan
~ 5 years ago

That was very helpful! Thank you very much!

Alexander Hofstede
Alexander Hofstede
~ 5 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
~ 5 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
~ 5 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
~ 5 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 Abramov(instructor)
~ 5 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
~ 5 years ago

Thanks for this course!

Nick Janssen
Nick Janssen
~ 5 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
~ 5 years ago

Thanks for the excellent series, really appreciate it .

Mauro Carrero
Mauro Carrero
~ 4 years ago

Great stuff, thanks Dan.

Eduardo  Cancino
Eduardo Cancino
~ 4 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
~ 4 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
~ 4 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
~ 4 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
~ 4 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
~ 4 years ago

Great lessons. Thank you very much. Priceless!!

Claire
Claire
~ 4 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
~ 4 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
~ 4 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
~ 3 years ago

Great course! Dan, thank you!

Logan
Logan
~ 2 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
~ 2 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
~ 2 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
~ a year ago

Good stuff. Well explained. Thanks Dan.