Refactor to use Action Type Constants and Action Creators when Dispatching Redux Actions
This lesson covers the use of action type constants and action creators.
Action type constants are common in legacy redux apps, but aren't strictly required. I find it's slightly better to include these constants in the slice files alongside the reducers and action creators that reference them.
Action creators are much more helpful and serve as a public API for sending actions into your reducer. They can help clean up messy dispatch statements and reduce the code needed to dispatch events.
Overall there's nothing very complicated about these two techniques, they're just common patterns in redux that are important to learn.
I strongly suggested studying the redux style guide for more insight into how to use these (and other) patterns effectively.
Jamund Ferguson: [0:00] Inside of store/rates.js, add a new commented section at the bottom called action types. Underneath that, type export const AMOUNT_CHANGED = rates/amountChanged.
[0:13] We can do the same thing for CURRENCY_CODE_CHANGED. Type export const CURRENCY_CODE_CHANGED = rates/currencyCodeChanged. Then up in our reducer, we can use these constants instead of the hardcoded strings.
[0:30] Because we're exporting them, anywhere in our application where we are dispatching actions, we can simply import the AMOUNT_CHANGED or CURRENCY_CODE_CHANGED action type constants.
[0:42] Let's go into AmountField. We are going to now import { AMOUNT_CHANGED } from "../store/rates", and we can pass that in as the type. It doesn't buy you a ton of value, but it's a simple way to make sure that we don't typo our action names, which is important because you can see how easy it might be to type something like amountchanged without a capital C. When we go in to update our events, it doesn't do anything.
[1:10] It can be helpful and it's good to be aware of it, however I don't think it's necessary to have a large action types file like you find in legacy Redux applications.
[1:19] A far more helpful pattern to me is something called action creators. Back in our store, create a new section called action creators. Let's do export const changeAmount =.
[1:30] We're going to create an arrow function that takes in as a parameter amount and simply returns an object wrapped in parentheses with a type of AMOUNT_CHANGED and a payload of whatever amount was passed in.
[1:44] We're also going to create another one for changeCurrencyCode. That will take not an amount but a currencyCode. That will also be the payload.
[1:52] An action creator is simply a function which takes in some data and returns a well formatted action which can be expected in our reducer. This will simplify our code a little bit more than simply having a variable to store your action name.
[2:07] If I go back into AmountField and instead of importing AMOUNT_CHANGED, import changeAmount and then dispatch changeAmount(e.target.value). My dispatch becomes a little bit simpler.
[2:18] Do the same thing for currencyCode. In our CurrencyCodePicker we will import { changeCurrencyCode } from "../store/rates". We'll simplify our dispatch by only having dispatched the value, and letting the store worry about what the events are named, and all that stuff.
[2:34] All I have to know is what is the actual function that's available. As long as I pass that in, the changeCurrencyCode function can worry about the type. It doesn't matter if I use the string or the constant, because I only have to change a string in one place as long as I'm using action creators.
[2:50] If selectors are the API that you use to access data from your store, action creators are your API for modifying it.