Redux: Define a Redux Action

rthefounding

Randy Rivera

Posted on November 28, 2021

Redux: Define a Redux Action
  • 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 property type set to the string 'LOGIN'.
  • Answer:
const action = {
  type: 'LOGIN'
}
Enter fullscreen mode Exit fullscreen mode

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'
}
Enter fullscreen mode Exit fullscreen mode
  • Answer:
function actionCreator() {
  return action;
}
Enter fullscreen mode Exit fullscreen mode

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' });
Enter fullscreen mode Exit fullscreen mode
  • 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'
  }
};
Enter fullscreen mode Exit fullscreen mode
  • Here there's an initialized state that's an object containing a login property currently set to false. There's also an action creator called loginAction() which returns an action of type LOGIN
  • Answer:
store.dispatch(loginAction())
Enter fullscreen mode Exit fullscreen mode

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 takes state and actionas arguments, and it always returns a new state.
  • 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'
  }
};
Enter fullscreen mode Exit fullscreen mode
  • 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 with login set to true. Else it returns the current state. Since the current state and dispatched action are passed to the reducer you can access the action's type with action.type

  • Answer:

const reducer = (state = defaultState, action) => {
  if (action.type === "LOGIN") {
    return { login: true };
  } else {
    return state;
  }

};
Enter fullscreen mode Exit fullscreen mode

Larson, Q., 2019. Frontend Development Libraries. [online] Freecodecamp.org. Available at: https://www.freecodecamp.org/learn/front-end-development-libraries/redux

💖 💪 🙅 🚩
rthefounding
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.

Related

Redux: Define a Redux Action
javascript Redux: Define a Redux Action

November 28, 2021