Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Import Statements to Use with Redux-Promise

Redux allows you to create a global state using a store accessed from any component, but to log or trigger an action between action dispatch, you need middleware.

Oct 19, 2020 • 4 Minute Read

Introduction

React uses Redux as a state management library that creates the global state object using the store, and any component can access the global state by subscribing to the store value in the component. Redux allows you to create the global state using a store that can get accessed from any of the components across the app, but if you want to log or trigger an action between action dispatch, you need to use middleware.

You can use a promise to evaluate the action and define success or failure. Thus, each action in Redux should return a response. You'll learn more about using Redux Promise in this guide.

What Is Middleware in Redux?

Middleware in Redux evaluates the action; in other words, you can say that middleware is just a piece of code that triggers between the request to the server.

You can use middleware to see the triggered action, the request payload, the response coming from the server, response status, and other middleware, such as redux-logger to log the request.

Using Redux-Promise in React App

You can use a promise to represent a value based on the request data, either the resolved value or why the request is unresolved.

JavaScript uses promises subscribed by a function, and the same function knows how to request status and resolve or reject the promise.

RR The redux-promise is an npm package that acts as a middleware for Redux and returns the object if it gets resolved. But it won’t return anything if rejected.

To use redux-promise, install it using the below command.

      npm install redux-promise

After installing redux-promise, the next step is to import the library.

      import promiseMiddleware from "redux-promise";

The import syntax is pretty simple to use from the package. You need to import by its name, such as promiseMiddleware or any other custom name, and you are good to go.

Applying Redux-Promise Middleware to Store

To make redux-promise work, configure it with the store so that once the app hits the server endpoint, the promise will start triggering the actions.

Before applying the middleware, the Redux store needs to be created, as shown below.

      import { createStore, combineReducers, applyMiddleware } from "redux";
// Primary reducer
import { contacts } from "../reducer";
// Importing redux-promise with custom name
import promiseMiddleware from "redux-promise";

export default () => {
  const rootReducer = combineReducers({
    contacts
  });

  // Applied middleware using 'applyMiddleware'
  return createStore(rootReducer, applyMiddleware(promiseMiddleware));
};

There are two import statements: import the reducer and import the redux-promise package. You can create the store using the function createStore, which accepts two different arguments:

  • Root reducer
  • Middleware function

The middleware function also expects the number of middleware functions in custom middleware implementation, or the package's name is used.

In the above example, the redux-promise package used is a middleware; hence, it is applied to the store using the applyMiddleware function. You will receive a payload that includes two arguments after applying the redux-promise:

  • Payload status as success to true if the promise gets resolved.
  • Payload status as success to false if the promise gets rejected.

You can configure the dispatch action as given below.

      store.dispatch({
    type: 'ADD_CONTACT',
    resolvesWith: ['CONTACT_ADDED'],
    rejectsWith: ['CONTACT_FAILED'],
    payload: {
        name: "This is first contact"
    }
})

resolvesWith and rejectsWith define the type of action if contact is added or failed due to inevitable results. Hence, the respected action is dispatched based on the promise status.

Conclusion

Redux middleware is the utility to help maintain the request and response triggered by a dispatch from a React component. It is widely used because of its straightforward configuration and the ability to resolve or reject the library's requests, such as redux-promise. I hope this sustainable solution will drive you to configure the best possible promise configuration with the Redux app.