Defining Actions

In Redux, actions are plain JavaScript objects that describe an intention to change the state. They represent an event or an action that has occurred in the application. Actions have a type property that indicates the type of action being performed. Additional properties, such as payload, can be included to provide additional data for the action.

Actions can be defined as functions that return an object. The object contains the type property and any additional properties required for the action. Here's an example of a Redux action that updates the user's name:

1const updateUser = (name) => {
2  return {
3    type: 'UPDATE_USER',
4    payload: name
5  };
6};

In the above example, the UPDATE_USER action is defined with a payload property that contains the new name.

Actions can also be asynchronous by using middleware like Redux Thunk. This allows actions to dispatch other actions or perform asynchronous operations. Here's an example of an asynchronous action that fetches user data from an API:

1const fetchUser = () => {
2  return async (dispatch) => {
3    dispatch({ type: 'FETCH_USER_REQUEST' });
4
5    try {
6      const response = await fetch('/api/user');
7      const data = await response.json();
8
9      dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
10    } catch (error) {
11      dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
12    }
13  };
14};

In the above example, the fetchUser action is defined as an asynchronous function that dispatches different actions based on the API response.

Defining actions is an important part of Redux as they determine how the state will be updated. Actions should capture the intention of the application and provide the necessary information to perform the state update. The actions can then be dispatched using the Redux store to trigger the corresponding reducers and update the state accordingly.

Think of actions like the instructions for a recipe. They specify the steps to be followed to achieve the desired outcome. In Redux, actions serve a similar purpose by describing the steps needed to update the state.

Now that we understand how to define actions, let's move on to implementing reducers to handle these actions.

xxxxxxxxxx

// Let's define an action to update the user's name

const updateUser = (name) => {

  return {

    type: 'UPDATE_USER',

    payload: name

  };

};

​

// Create an action to fetch user data

const fetchUser = () => {

  return async (dispatch) => {

    dispatch({ type: 'FETCH_USER_REQUEST' });

​

    try {

      const response = await fetch('/api/user');

      const data = await response.json();

​

      dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });

    } catch (error) {

      dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });

    }

  };

};