In this lesson, we'll be learning about Actions in Redux, specifically how and where they fit in with the Reducers that we've set up thus far. We'll also breakdown the Types and Payloads involved with Actions.
- Learn about Actions and Types
- Build out Actions and Types
- Have the code from the
redux reducers
lesson working.
In Redux, Actions are functions that provide a Type and a Payload. These functions are used to update our state. Redux uses the Types to track if any change was performed and on which piece of state at any given time.
We dispatch
Actions from our components by importing our Actions into the components we want to use them in.
Heres an example of an action:
const AddTodo = (todo) => ({
type: 'ADD_TODO',
payload: todo
})
Our Action returns an object with the type of action we are performing and a Payload being the item we want to add or use to update our state.
Let's start by creating a types.js
file in our store
directory.
Next, create an actions
folder inside of the store
directory.
In the actions
folder, create a new file called TodoActions.js
.
This file will hold all of the actions to handle our todoState
.
Add the following function to TodoActions.js
:
export const AddTodo = (todo) => ({
type: 'ADD_TODO',
payload: todo
})
Let's break this down:
- We're exporting a function called
AddTodo
. - Accepts a
todo
as an argument. - It implicity returns an object with a type of
ADD_TODO
and a Payload of the todo we want to add.
Now, one thing you may notice is that we're setting the Type here as a string that we typed in. This is all well and good, but what if we make a mistake while typing it? In that case, Redux has no idea what this function is supposed to be doing. This is where our types
file comes in. We can store our Action Types here as variables and re-use them without having to worry about typos as our application grows.
Open your types.js
file. Let's add our first Type:
export const ADD_TODO = 'ADD_TODO'
Now in your TodoActions
, import this Type. Remember, since we're using the export const
syntax we'll have to use the destructuring import syntax.
Your TodoActions.js
file should look like the following:
import { ADD_TODO } from '../types'
export const AddTodo = (todo) => ({
type: 'ADD_TODO',
payload: todo
})
Now, swap out the Type in the AddTodo
function to our new ADD_TODO
variable.
import { ADD_TODO } from '../types'
export const AddTodo = (todo) => ({
type: ADD_TODO,
payload: todo
})
Now, in your TodoReducer.js
, do the same:
import { ADD_TODO } from '../types'
const initialState = {
todos: [],
newTodo: ''
}
const TodoReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return { ...state, todos: [...state.todos, action.payload] }
case 'NEW_TODO':
return { ...state, newTodo: action.payload }
default:
return { ...state }
}
}
export default TodoReducer
Create two new Types:
- NEW_TODO
- REMOVE_TODO
Create two new Actions:
- CreateNewTodo
- RemoveTodo
The CreateNewTodo
should accept a form value as an argument.
The RemoveTodo
should accept an index as an argument.
Change the NEW_TODO
case in the TodoReducer
to your new NEW_TODO variable.
Add a new case to the TodoReducer
for REMOVE_TODO. It should return a new object with everything in state for now. Hint: Look at the default case.
In this lesson, we learned about writing functions for Actions, setting up a Payload, and creating Types associated with each Action.