React Hooks + Redux: CRUD example with Axios and Rest API

Tien Nguyen - Apr 7 '21 - - Dev Community

In this tutorial, I will show you how to build a React Redux Hooks + Axios example by a CRUD Application to consume Rest API.

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

Overview of React Hooks Redux CRUD example

We will build a React Redux Tutorial Application with Rest 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 a Tutorial:

react-hooks-redux-crud-example-create-tutorial

  • Retrieve all Tutorials:

react-hooks-redux-crud-example-retrieve-tutorial

  • Click on Edit button to update a Tutorial:

react-hooks-redux-crud-example-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-hooks-redux-crud-example-update-tutorial

  • Search Tutorials by title:

react-hooks-redux-crud-example-search-tutorial

  • Check Redux State with Dev-tool:

react-hooks-redux-crud-example-check-redux-state

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 Hooks Redux CRUD Component Diagram with Router & Axios

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

react-hooks-redux-crud-example-components

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

– Three pages that dispatch actions to Redux Thunk Middleware which uses TutorialDataService to call Rest API:

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

TutorialDataService uses axios to make HTTP requests and receive responses.

React Hooks + Redux with API example

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

react-hooks-redux-crud-example-redux-store

We're gonna create Redux store for storing tutorials data. Other React Components will work with the Store via dispatching an action or getting value using React-Redux Hooks API.

The reducer will take the action and return new state.

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-hooks-redux-crud-example-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 pages: TutorialsList, Tutorial, AddTutorial.
  • http-common.js initializes axios with HTTP base Url and headers.
  • TutorialService 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.

For step by step and Github, please visit:
https://bezkoder.com/react-hooks-redux-crud/

Using Redux-Toolkit:
Redux-Toolkit CRUD example with React Hooks

Further Reading

Security:

Related Posts:

Serverless with Firebase:

Fullstack:

Dockerize:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .