Redux - Actions


Advertisements

Actions are the only source of information for the store as per Redux official documentation. It carries a payload of information from your application to store.

As discussed earlier, actions are plain JavaScript object that must have a type attribute to indicate the type of action performed. It tells us what had happened. Types should be defined as string constants in your application as given below −

const ITEMS_REQUEST = 'ITEMS_REQUEST';

Apart from this type attribute, the structure of an action object is totally up to the developer. It is recommended to keep your action object as light as possible and pass only the necessary information.

To cause any change in the store, you need to dispatch an action first by using store.dispatch() function. The action object is as follows −

{ type: GET_ORDER_STATUS , payload: {orderId,userId } }
{ type: GET_WISHLIST_ITEMS, payload: userId }

Actions Creators

Action creators are the functions that encapsulate the process of creation of an action object. These functions simply return a plain Js object which is an action. It promotes writing clean code and helps to achieve reusability.

Let us learn about action creator which lets you dispatch an action, ‘ITEMS_REQUEST’ that requests for the product items list data from the server. Meanwhile, the isLoading state is made true in the reducer in ‘ITEMS_REQUEST’ action type to indicate that items are loading, and data is still not received from the server.

Initially, the isLoading state was false in the initialState object assuming nothing is loading. When data is received at browser, isLoading state will be returned as false in ‘ITEMS_REQUEST_SUCCESS’ action type in the corresponding reducer. This state can be used as a prop in react components to display loader/message on your page while the request for data is on. The action creator is as follows −

const ITEMS_REQUEST = ‘ITEMS_REQUEST’ ;
const ITEMS_REQUEST_SUCCESS = ‘ITEMS_REQUEST_SUCCESS’ ;
export function itemsRequest(bool,startIndex,endIndex) {
   let payload = {
      isLoading: bool,
      startIndex,
      endIndex
   }
   return {
      type: ITEMS_REQUEST,
      payload
   }
}
export function itemsRequestSuccess(bool) {
   return {
      type: ITEMS_REQUEST_SUCCESS,
      isLoading: bool,
   }
}

To invoke a dispatch function, you need to pass action as an argument to dispatch function.

dispatch(itemsRequest(true,1, 20));
dispatch(itemsRequestSuccess(false));

You can dispatch an action by directly using store.dispatch(). However, it is more likely that you access it with react-Redux helper method called connect(). You can also use bindActionCreators() method to bind many action creators with dispatch function.

Useful Video Courses


Video

React and Redux: Learn By Building Real World Projects

56 Lectures 12.5 hours

Eduonix Learning Solutions

Video

React: Web Apps with ReactJS and Redux - The Complete Course

63 Lectures 9.5 hours

TELCOMA Global

Video

MERN Stack Full Ecommerce Site - Using React, Redux, Node.js

Best Seller

129 Lectures 19.5 hours

Ghulam Abbas

Video

Complete Guide To Redux-Saga With React JS

31 Lectures 3 hours

Saumitra Vishal

Video

React Redux Firebase Authentication with CRUD Application

Best Seller

55 Lectures 4 hours

Saumitra Vishal

Advertisements