React Redux & MySQL: CRUD example with Node.js Express
Tags: react, redux, mysql, webdev
Published: 2021-04-06 02:38:15

In this tutorial, I will show you how to build React Redux + MySQL CRUD example with Node.js Express server for REST APIs. Front-end side uses React Router, Axios & Bootstrap.

Full Article: [https://bezkoder.com/react-redux-mysql-crud/](https://bezkoder.com/react-redux-mysql-crud/)

<h2>React Redux + MySQL CRUD example Overview</h2>
We will build a full-stack Tutorial Application in that:
<ul>
	<li>Tutorial has id, title, description, published status.</li>
	<li>User can create, retrieve, update, delete Tutorials.</li>
	<li>There is a search box for finding Tutorials by title.</li>
</ul>

Here are screenshots of the example.

- Add a Tutorial:

![react-redux-mysql-crud-example-node-js-express-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l62vhu674h6h0r3tiur2.png)

- Show all tutorials:

![react-redux-mysql-crud-example-node-js-express-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhcg6elhh4u9ktbb29l5.png)

– Click on <strong>Edit</strong> button to view details of an item:

![react-redux-mysql-crud-example-node-js-express--retrive-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlq3vbpygzbaljowbx0g.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong>/<strong>Pending</strong> using <strong>Publish</strong>/<strong>UnPublished</strong> button</li>
	<li>remove the object from MySQL Database using <strong>Delete</strong> button</li>
	<li>update this object's details on Database with <strong>Update</strong> button</li>
</ul>

![react-redux-mysql-crud-example-node-js-express-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32g1jmgtupi2cpvdtlon.png)

- Search objects by field 'title':

![react-redux-mysql-crud-example-node-js-express-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffn7hr91k0mgizfcovp3.png)

- Check MySQL database:

![react-redux-mysql-crud-example-node-js-express-database-table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdbmj8trqecu72wp8pli.png)

- Check Redux state with Dev-tool:

![react-redux-mysql-crud-example-node-js-express-redux-state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3o0qsv8i8g1v4gh9uqm.png)

<h2>React Redux + MySQL CRUD example Architecture</h2>
We're gonna build the application with following architecture:

![react-redux-mysql-crud-example-node-js-express-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/illgawqtf5rmai1fzxav.png)

– Node.js Express exports REST APIs & interacts with MySQL Database using Sequelize ORM.
– React Client sends HTTP Requests and retrieves HTTP Responses using <em>Axios</em>, consume data on Redux which provides state to the Components. React Router is used for navigating to pages.

## React Redux Front-end
### Overview
This is React components that we're gonna implement:

![react-redux-mysql-crud-example-client-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/347v4as5airgacynblnr.png)

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

– Three components that dispatch <strong><em>actions</em></strong> to <code>Redux Thunk Middleware</code> which uses <code>TutorialDataService</code> to call Rest API.
<ul>
	<li><code>TutorialsList</code> component gets and displays Tutorials.</li>
	<li><code>Tutorial</code> component has form for editing Tutorial's details based on <code>:id</code>.</li>
	<li><code>AddTutorial</code> component has form for submission new Tutorial.</li>
</ul>

– <code>TutorialDataService</code> uses <code>axios</code> to make HTTP requests and receive responses.

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

![react-redux-mysql-crud-example-store-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mim8fo3rugnupw8p6l4o.png)

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

The <code>reducer</code> will take the action and return new <code>state</code>.

<h3>Project Structure</h3>
![react-redux-mysql-crud-example-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lctzp43sin5vhytn5g3.png)

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

About Redux elements that we're gonna use:
- <strong>actions</strong> folder contains the action creator (<em>tutorials.js</em> for CRUD operations and searching).
- <strong>reducers</strong> folder contains the reducer (<em>tutorials.js</em>) which updates the application state corresponding to dispatched action.

<h2>Node.js Express Back-end</h2>
<h3>Overview</h3>
These are APIs that Node.js Express App will export:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>GET</td>
<td>api/tutorials</td>
<td>get all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials/:id</td>
<td>get Tutorial by <code>id</code></td>
</tr>
<tr>
<td>POST</td>
<td>api/tutorials</td>
<td>add new Tutorial</td>
</tr>
<tr>
<td>PUT</td>
<td>api/tutorials/:id</td>
<td>update Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials/:id</td>
<td>remove Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials</td>
<td>remove all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials?title=[kw]</td>
<td>find all Tutorials which title contains <code>'kw'</code></td>
</tr>
</tbody>
</table>
</div>

<h3>Project Structure</h3>
![react-redux-mysql-crud-example-node-js-express-server-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk88h1l1quulu9sxd8zu.png)

- <em>db.config.js</em> exports configuring parameters for MySQL connection & Sequelize.
- <strong>Express</strong> web server in <em>server.js</em> where we configure CORS, initialize & run Express REST APIs.
- Next, we add configuration for MySQL database in <strong>models</strong>/<em>index.js</em>, create <strong>Sequelize</strong> data model in <strong>models</strong>/<em>tutorial.model.js</em>.
- Tutorial controller in <strong>controllers</strong>.
- Routes for handling all CRUD operations (including custom finder) in <em>tutorial.routes.js</em>.

For step by step and Github, please visit:
[https://bezkoder.com/react-redux-mysql-crud/](https://bezkoder.com/react-redux-mysql-crud/)

## Further Reading
- <a href="https://bezkoder.com/react-express-authentication-jwt/">React + Node.js Express: User Authentication with JWT example</a>
- <a href="https://bezkoder.com/react-file-upload-axios/">React File Upload with Axios and Progress Bar to Rest API</a>
- Front-end without Redux:
<ul>
	<li><a href="https://bezkoder.com/react-crud-web-api/">Using React Components</a></li>
	<li><a href="https://bezkoder.com/react-hooks-crud-axios-api/">Using React Hooks</a></li>
	<li><a href="https://bezkoder.com/react-material-ui-examples-crud/">Using React with Material UI</a></li>
</ul>

Run both projects in one place:
<a href="https://bezkoder.com/integrate-react-express-same-server-port/">How to integrate React with Node.js Express on same Server/Port</a>

Dockerize:
- [Docker Compose React + Node.js Express + MongoDB example](https://www.bezkoder.com/docker-mern/)
- [Docker Compose React + Node.js Express + MySQL example](https://www.bezkoder.com/docker-compose-react-nodejs-mysql/)