Make Dispatching Redux Actions More Reliable With Action Creators
Dispatching actions is how our application sends information to Redux in order to update state. While we could build our action objects inline and use strings for action names, this can be tedious and error prone. In this lesson, we’ll see how the use of constants and action creator functions will make dispatching actions easier and more reliable.
[00:00] Here when we call Dispatch, we're creating our action object inline. Since we'll need an action object for any action we want to dispatch, and since it's quite possible that we'll want to dispatch the same type of action for multiple components, let's create a function that will create our action object for us.
[00:15] I'm going to take this object that we're passing into Dispatch, and I'm just going to cut it. Then back in my todo.js file, where we're defining the reducer, I'm going to create a new named export.
[00:27] I'm going to export const, and I'll call this updateCurrent. updateCurrent is going to be a function that's going to take a value, and that's going to return our object with the type set to currentUpdate and our value passed in as the payload.
[00:47] Now that we have this action creator function, we can save this file, and go back into index.js. We'll import that. I'm going to import updateCurrent, and that's going to be imported from my reducers/todo module.
[01:08] Then when we call Dispatch here, we're just going to call that with updateCurrent, passing our value through. We can save that. Now we can go in here, and everything should work as expected.
[01:23] If we look at our action creator and reducer again, we'll notice that we're using currentUpdate as a string, both in the action creator and in our reducer. If I were to mistype part of my string and save this, when the browser reloads, everything's going to look fine, but as soon as I try to do anything, nothing's going to work, and I can't type into the input.
[01:43] The problem here is that I'm dispatching an action, but the type doesn't match up with anything in the reducer, so I just return the state, as is. While using strings here works, it can lead to strange bugs that might be difficult to chase down.
[01:57] What I'd rather do is take this string and assign it to a constant that I can do right up here. I can give it the same name as my string, and then I can use this constant in both my action creator and down here in the reducer. Now they're guaranteed to match. If I save this, the browser reloads, and I'm back to being able to type in the input.
[02:29] Then if I come back and I make the same mistake that I made earlier, when I save this, I'm going to get an exception. It won't even build my JavaScript.
[02:37] Then I can come back in here and very easily track down exactly what the problem is, because it's giving me a line number. Now when it builds, I know that these two things match.
[02:54] I'm going to come down here and I'm going to do the same thing with my todo add. I'll declare a constant. We'll call it todo_add.
[03:07] We'll just assign the string there, and then we'll replace where I had the string with that constant. Then my code's going to be far less error-prone.
hello @Andy Van Slaars, in a large application, would you recommend to have a central directory/folder of "action dispatchers" functions that take a payload parameter and automatically dispatch the actions, or rather, functions like the one you created here, that only create the action type and then those are taken as param to then dispatch somewhere else? approach 1: -- redux/dispatchers --- todo ---- export const updateCurrent = (val) => store.dispatch({type: CURRENT_UPDATE, payload: val}); and in some other file i just call my dispatcher updateCurrent()
approach 2: -- redux/reducers --- todo.js ---- export const updateCurrent = (val) => ({type: CURRENT_UPDATE, payload: val}); and in some other file i do store.dispatch(updateCurrent(val))
thanks!
This also feels out of order