DEV Community

Cover image for React Redux example with API calls: Build a CRUD app
Tien Nguyen
Tien Nguyen

Posted on • Updated on • Originally published at bezkoder.com

React Redux example with API calls: Build a CRUD app

In this tutorial, I will show you how to build a React Redux example to with API calls to consume Rest API by a CRUD Application. You also can display and modify data with Router, Axios & Bootstrap.

Full Article: https://bezkoder.com/react-redux-crud-example/

Overview of React Redux example with API calls

We will build a React Redux Tutorial Application with API calls in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • There is a Search bar for finding Tutorials by title.

Here are screenshots of our React Redux CRUD Application.

  • Create an item:

react-redux-example-api-calls-axios-create-tutorial

  • Retrieve all items:

react-redux-example-api-calls-axios-retrieve-tutorial

  • Click on Edit button to update an item:

react-redux-example-api-calls-axios-retrieve-one-tutorial

On this Page, you can:

  • change status to Published using Publish button
  • delete the item using Delete button
  • update the item details with Update button

react-redux-example-api-calls-axios-update-tutorial

  • Search Tutorials by title:

react-redux-example-api-calls-axios-search-tutorial

  • Redux Store:

react-redux-example-api-calls-axios-store

This React Client consumes the following Web API:

Methods Urls Actions
POST /api/tutorials create new Tutorial
GET /api/tutorials retrieve all Tutorials
GET /api/tutorials/:id retrieve a Tutorial by :id
PUT /api/tutorials/:id update a Tutorial by :id
DELETE /api/tutorials/:id delete a Tutorial by :id
DELETE /api/tutorials delete all Tutorials
GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword

You can find step by step to build a Server like this in one of these posts:

React Redux App Component Diagram with Router & Axios

Now look at the React components that we're gonna implement:

react-redux-example-api-calls-axios-components

– The App component is a container with React Router. It has navbar that links to routes paths.

– Three components that dispatch actions to Redux Thunk Middleware which uses TutorialDataService to call Rest API.

  • TutorialsList component gets and displays Tutorials.
  • Tutorial component has form for editing Tutorial's details based on :id.
  • AddTutorial component has form for submission new Tutorial.

TutorialDataService uses axios to make HTTP requests and receive responses.

React Redux with API Calls example

This diagram shows how Redux elements work in our React Application:

react-redux-example-api-calls-axios-redux-store-architecture

We're gonna create Redux store for storing tutorials data. Other React Components will work with the Store via dispatching an action.

The reducer will take the action and return new state.

Using Redux Toolkit instead:
Redux-Toolkit example

Technology

  • React 17/16
  • react-redux 7.2.3
  • redux 4.0.5
  • redux-thunk 2.3.0
  • react-router-dom 5.2.0
  • axios 0.21.1
  • bootstrap 4

Project Structure

react-redux-example-api-calls-axios-project-structure

I'm gonna explain it briefly.

  • package.json contains main modules: react, react-router-dom, react-redux, redux, redux-thunk, axios & bootstrap.
  • App is the container that has Router & navbar.
  • There are 3 components: TutorialsList, Tutorial, AddTutorial.
  • http-common.js initializes axios with HTTP base Url and headers.
  • TutorialDataService has methods for sending HTTP requests to the Apis.
  • .env configures port for this React CRUD App.

About Redux elements that we're gonna use:

  • actions folder contains the action creator (tutorials.js for CRUD operations and searching).
  • reducers folder contains the reducer (tutorials.js) which updates the application state corresponding to dispatched action.

More steps and Github source code at:
https://bezkoder.com/react-redux-crud-example/

If you want to use Redux-Toolkit instead, kindly visit:
Redux-Toolkit example with CRUD Application

Or you can add Pagination Component:
React Pagination with API using Material-UI

react-redux-example-api-calls-axios-pagination

Further Reading

Related Posts:

Serverless:

Dockerize:

Top comments (0)