Course Content
Expert React
Expert React
4. Formik
6. Next Steps
Actions
Step 3: Actions and action creators
Theory
Actions are payloads of information that describe the changes we want to make to the state. Action creators are functions that create actions. They encapsulate the logic of creating actions and can be reused throughout the app.
Practice
In the actions
folder, we have a file named counterAction.js
. This file is where we define actions and action creators for the counter functionality.
Code explanation:
- Line 1: Import the
createAction
function from the@reduxjs/toolkit
package. This function simplifies the creation of action creators. - Line 3: Create the action creator function
increment
usingcreateAction
. This function generates actions for incrementing the counter.- The string
"counter/increment"
provided as an argument represents the action type. It helps identify the action when it is dispatched.
- The string
- Line 4: Similarly, create the action creator function
decrement
usingcreateAction
. This function generates actions for decrementing the counter.- The string
"counter/decrement"
represents the action type for decrementing.
- The string
By using createAction
, these functions generate action objects with a type
property set to the specified type string. These actions can be dispatched in Redux reducers or React components to update the Redux store.
Note
Action type strings, such as
"counter/increment"
and"counter/decrement"
, should be descriptive and reflect the purpose of the action. It is common to prefix the action type with the feature or slice name for better organization. Using string constants or variables is recommended for consistency and easier refactoring.
Complete code
Everything was clear?