Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Actions & Action Creators" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Finally Brian creates the actions for the application. He stores the action definition in an actions.js file and the implementation of the action in an actionCreators.js file. These don’t need to be in separate files, but Brian prefers this architecture. Actions trigger the reducer to carry out the modification of state.

Get Unlimited Access Now

Transcript from the "Actions & Action Creators" Lesson

[00:00:00]
>> Brian Holt: Go create yet another file. Call it actions.js
>> Brian Holt: And we're gonna say export const SET_SEARCH_TERM = 'SET_SEARCH_TERM'.
>> Brian Holt: Now you don't have to do this this way. However, I suggest that you do, and I'm going to assert that most people do actions this way. So actions.js will have zero logic and it's just going to export a bunch of different like const, right?

[00:00:36] So in this particular one, SET_SEARCH_TERM. Instead of actually using the string SET_SEARCH_TERM everywhere, we're going to import this, right, and then use that. This helps for readability, refactorability, all bunch of different things. So if ever we wanna change actions, or the strings that they are, or something like that, it's all in one central place, so it's helpful believe me.

[00:01:02]
>> Brian Holt: Okay, then we go create yet another file, that's going to be actionCreators.js.
>> Brian Holt: Okay, so first thing we're gonna do, is we're going import that action we just created. { SET_SEARCH_TERM } from './actions'. So notice that actions has no export default. We have a named export there which is why we need the curly braces.

[00:01:40] So that's how you do a named export in ES6.
>> Brian Holt: Okay.
>> Brian Holt: And then down here we're going to export function setSearchTerm. Which take in a searchTerm. And all does is that, it returns an object of type: SET_SEARCH_TERM and searchTerm: searchTerm. So it's a function that you call and it gives you back a correctly shaped action.

[00:02:28] Again this is useful because you don't have to remember how to create those actions inside of your UI. Your UI has no concern of how to create these actions. It just does that correctly.
>> Brian Holt: Now this being ES6, we can actually just do, because it's search term, colon, search term, and it's the same thing.

[00:02:51] With ES6 we can just say searchTerm, like that, and it will automatically expand that out to the searchTerm: searchTerm. If you're interested in being lazy, like I am.
>> Brian Holt: Okay, so, again this API seems a little burdensome. You can totally just dispatch an action from the UI with the string, and the correct searchTerm.

[00:03:20] And side step, both the action creators and the actions file. However, I am going to tell you that you're eventually going to hate that. It's really easy up front, it sucks later. So it is useful to separate these out into pieces.