React JS CRUD Actions using REDUX Pattern and MUI Design

React JS is a popular JavaScript library for building user interfaces. It allows developers to create interactive and dynamic web applications with ease. REDUX is a state management library that can be used with React to manage the application’s state in a predictable way. MUI (Material-UI) is a popular React UI framework that provides a set of components and styles for building modern web applications. In this article, we will learn how to perform CRUD (Create, Read, Update, Delete) actions using React JS with REDUX Pattern and MUI Design, along with JSON SERVER API for data management.

Setting up the environment

First, we need to set up our development environment. We can start by creating a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app react-crud-app

Once the project is created, navigate to the project directory and install the required dependencies:

cd react-crud-app
npm install redux react-redux @material-ui/core @material-ui/icons json-server

We will also need to install Axios for making HTTP requests to our JSON SERVER API:

npm install axios

Creating the REDUX store

We will start by creating a Redux store to manage the application’s state. Create a new file called store.js in the src folder of your project and add the following code:

“`javascript
// store.js

import { createStore } from ‘redux’;
import rootReducer from ‘./reducers’;

const store = createStore(rootReducer);

export default store;
“`

Next, we need to create a reducer to handle the CRUD actions. Create a new file called reducers.js and add the following code:

“`javascript
// reducers.js

const initialState = {
items: []
};

const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ‘ADD_ITEM’:
return {
…state,
items: […state.items, action.payload]
};
case ‘DELETE_ITEM’:
return {
…state,
items: state.items.filter(item => item.id !== action.payload)
};
case ‘UPDATE_ITEM’:
// handle update action
case ‘FETCH_ITEMS’:
// handle fetch action
default:
return state;
}
};

export default rootReducer;
“`

Building the MUI Design components

Now let’s create the MUI Design components for our CRUD application. We will start by building a form for adding new items. Create a new file called AddItemForm.js and add the following code:

“`javascript
// AddItemForm.js

import React, { useState } from ‘react’;
import { useDispatch } from ‘react-redux’;
import { addItem } from ‘./actions’;

const AddItemForm = () => {
const [name, setName] = useState(”);
const dispatch = useDispatch();

const handleSubmit = () => {
dispatch(addItem({ name }));
setName(”);
};

return (

);
};

export default AddItemForm;
“`

Next, let’s create a component to display the list of items. Create a new file called ItemList.js and add the following code:

“`javascript
// ItemList.js

import React from ‘react’;
import { useSelector, useDispatch } from ‘react-redux’;
import { deleteItem } from ‘./actions’;

const ItemList = () => {
const items = useSelector(state => state.items);
const dispatch = useDispatch();

const handleDelete = (id) => {
dispatch(deleteItem(id));
};

return (

{items.map(item => (
• {item.name}
  handleDelete(item.id)}>Delete

))}

);
};

export default ItemList;
“`

Setting up the JSON SERVER API

Finally, let’s set up a simple JSON SERVER API to manage the data for our application. Create a new file called db.json in the root folder of your project and add some initial data:

“`json
{
“items”: [
{ “id”: 1, “name”: “Item 1” },
{ “id”: 2, “name”: “Item 2” }
]
}
“`

Next, add a script to your package.json file to start the JSON SERVER API:

“`json
“scripts”: {
“start”: “json-server –watch db.json –port 3001”
}
“`

Now you can start the JSON SERVER API by running the following command in your terminal:

npm start

Conclusion

In this article, we have learned how to perform CRUD actions using React JS with REDUX Pattern and MUI Design. We have also set up a JSON SERVER API to manage our application’s data. With these tools and techniques, you can build powerful and responsive web applications with ease.