Redux: Define a Redux Action
Randy Rivera
Posted on November 28, 2021
- Updating state is one of Redux core tasks. In Redux, all state updates are triggered by dispatching actions. Think of Redux actions as messengers that deliver information about events happening in your app to the Redux store. The store then conducts the business of updating state based on the action that occurred.
- For example, the action carries a username after a user logs in, actions must carry a
type
property that specifies the 'type' of action that occurred. - Here we have to write a Redux action as simple as declaring an object with a type property. Declare an object
action
and let's give it a propertytype
set to the string'LOGIN'
. - Answer:
const action = {
type: 'LOGIN'
}
Define an Action Creator
- After we have created an action. The next step is to send the action to the redux store so it can update its state. An action creator is simply a JavaScript function that returns an action.
- Let's define a function named
actionCreator()
that returns the action object when called. - Code:
const action = {
type: 'LOGIN'
}
- Answer:
function actionCreator() {
return action;
}
Dispatch an Action Event
- Dispatch method is what you use to dispatch actions to the Redux store. Calling
store.dispatch()
and passing the value returned from an action creator sends an action back to the store. - Like the above post, action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store.
- We can dispatch both the action of type
'LOGIN'
:
store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });
- Here FreeCodeCamp wants us dispatch the 'LOGIN' action to the Redux store by calling the dispatch method, and passing the action created by
loginAction()
- Code:
const store = Redux.createStore(
(state = {login: false}) => state
);
const loginAction = () => {
return {
type: 'LOGIN'
}
};
- Here there's an initialized state that's an object containing a
login
property currently set tofalse
. There's also an action creator calledloginAction()
which returns an action of typeLOGIN
- Answer:
store.dispatch(loginAction())
Handle an Action in the Store
- The job of a
reducer
function is put simply, helps the Redux store know how to respond to that action. Reducers in Redux are responsible for the state modifications that take place in response to actions. A reducer takesstate
andaction
as arguments, and it always returns a newstate
. - The reducer function must always return a new copy of state and never modify state directly.
- Code:
const defaultState = {
login: false
};
const reducer = (state = defaultState, action) => {
// Change code below this line
// Change code above this line
};
const store = Redux.createStore(reducer);
const loginAction = () => {
return {
type: 'LOGIN'
}
};
Here we have to fill in the body of the
reducer
function so that if it receives an action of type: 'LOGIN' it returns a state object withlogin
set totrue
. Else it returns the currentstate
. Since the current state and dispatched action are passed to the reducer you can access the action's type withaction.type
Answer:
const reducer = (state = defaultState, action) => {
if (action.type === "LOGIN") {
return { login: true };
} else {
return state;
}
};
Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux
💖 💪 🙅 🚩
Randy Rivera
Posted on November 28, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.