Redux: Extracting Action Creators
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.
I find myself learning a new javascript framework and worrying about the css.
https://jsbin.com/pebesisaqi/edit?html,css,js,output
Awesome series, thanks for taking the time to make it!
Wow. Incredible. THANK YOU!
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.
Just awesome, Dan! Thank you.
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.
Fantastic series. I now feel I'm not only a better Redux developer, but also a better React developer.
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!
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!
Thanks for this excellent tutorial. Dan is amazing developer or creator.
That was very helpful! Thank you very much!
Well done, learned a lot. Might be useful to add one more; refactoring the whole thing to separate files and recommended project/folder structure?
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
Thanks Dan for the excellent walk through Redux. This helps me understand the flow of data and how to think of the application.
Series was great, thanks for making it! Feedbacks:
- 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
getStatefromrenderwas 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. - 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.).
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.
Thanks for this course!
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!
Thanks for the excellent series, really appreciate it .
Great stuff, thanks Dan.
Could you add a video explaining how to integrate data from service and having an store that handles CRUD?
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!
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?
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 ?
This course was awesome. Lots learned, lots or re-watching to really digest it and now a lifetime of application to master :D
Great lessons. Thank you very much. Priceless!!
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?
This series has been the best tech learning experience ever, I feel others should also learn from the approach used to explain concepts. Thanks.
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.
Great course! Dan, thank you!
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
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.
Thank you, Dan. What a great course!. I love how you explain what happens under the hood of Store, CombineReducers and Provider Component.
Good stuff. Well explained. Thanks Dan.
Thx for the great tutorial series! Was educational w/o being overwhelming - Russian accent was cool to listen to as well.