Dispatching Actions and Updating the Store

In this article, we will learn about dispatching actions and updating the store in Redux.

What are actions in Redux?

Actions in Redux are objects that represent an intention to change the state of the application. They are the only source of information for the store and are the only way to trigger a state change.

Dispatching Actions

To dispatch an action, we use the dispatch() function, which is available on the store. The dispatch function takes an action object as its argument and sends it to the reducer function.

For example, let’s say we want to add a to-do item to our list. We can dispatch an action with the following object:

{
  type: 'ADD_TODO',
  todo: 'Write a blog post'
}

Updating the Store with Reducers

The reducer function is responsible for updating the store based on the action that was dispatched. It receives the current state of the store and the action as arguments and returns the new state.

For example, let’s say we have the following reducer function:

function todoReducer(state = [], action) {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, action.todo];
    default:
      return state;
  }
}

In this example, the reducer function listens for the ADD_TODO action and adds the to-do item to the state array. If the action type is anything other than ADD_TODO, the reducer returns the current state.

Conclusion

In this article, we learned how to dispatch actions and update the store in Redux. We saw how to use the dispatch() method to send actions to the store, and how to use reducers to update the store state based on the action type and payload. We also saw how to use async actions to make API requests and update the store with the response data. Understanding how to dispatch actions and update the store is an important part of using Redux in your React applications.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

{
  type: 'ADD_TODO',
  todo: 'Buy milk'
}

function todoReducer(state = [], action) {
  switch(action.type) {
    case 'ADD_TODO':
      return [...state, action.todo];
    default:
      return state;
  }
}

{
  type: 'REMOVE_TODO',
  todo: 'Write a blog post'
}

store.dispatch({
  type: 'UPDATE_USER',
  payload: {
    name: 'John',
    age: 30
  }
});

store.dispatch((dispatch) => {
  fetch('https://my-api.com/users')
    .then((response) => response.json())
    .then((data) => {
      dispatch({
        type: 'SET_USERS',
        payload: data
      });
    });
});