Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

React.js + Vite.js Redux Toolkit Bootstrap Table CRUD Project Using useSelector & useDispatch Hook in Browser

Posted on April 10, 2023

 

 

Get Started

 

 

In order to get started you need to create a new react.js project using vite.js as shown below

 

 

npm create vite@ reduxcrud

 

 

npm i react-bootstrap bootstrap

 

 

npm i redux react-redux

 

 

 

 

 

crud/crudStore.js

 

 

JavaScript
1
2
3
4
import {createStore} from 'redux'
import { crudReducer } from './crudReducer'
 
export const crudStore = createStore(crudReducer)

 

 

As you can see we are creating the store for the global state using the createStore() and then we are passing the reducer function that we are importing at the top. Now we need to define this reducer function.

 

 

crud/crudReducer.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { ADD_USER, REMOVE_USER, UPDATE_USER } from "./crudTypes";
 
const initialState = {
  users: [],
};
 
export const crudReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_USER:
      return {
        ...state,
        users: [...state.users, action.payload],
      };
    case REMOVE_USER:
      return {
        ...state,
        users: state.users.filter((u) => u.id !== action.payload),
      };
    case UPDATE_USER:
      let {id,name,age} = action.payload
      return {
        ...state,
        users: state.users.map((user) =>
          user.id === id ? { ...user, name, age } : user
        ),
      };
    default: {
      return state;
    }
  }
};

 

 

As you can see in the above reducer function we have defined the various methods for the various operations such as adding the user or removing the user and also updating the user and then we have the default case where we return the state . Here also we declare the initialState which contains the array of user objects.

 

 

crud/crudTypes.js

 

 

JavaScript
1
2
3
export const ADD_USER = "add_User"
export const REMOVE_USER = "remove_User"
export const UPDATE_USER = "update_User"

 

 

As you can see we have defined all the constants for performing the various operations that we are importing in other files of reducers and actions.

 

 

crud/crudAction.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { ADD_USER, REMOVE_USER, UPDATE_USER } from "./crudTypes"
 
 
export const addUser = (user) => {
    return {
        type:ADD_USER,
        payload:user
    }
}
 
export const removeUser = (id) => {
    console.log(id)
    return {
        type:REMOVE_USER,
        payload:id
    }
}
 
export const updateUser = (id,name,age) => {
    return {
        type:UPDATE_USER,
        payload:{
            id,
            name,
            age
        }
    }
}

 

 

As you can see we have defined various methods for the various actions that we perform inside the application. Here we are expecting the user to pass the type and payload parameters.

 

 

App.jsx

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import './App.css'
import Users from './Users'
import { Provider } from 'react-redux'
import { crudStore } from './crud/crudStore'
 
function App() {
 
  return (
    <Provider store={crudStore}>
     <Users/>
    </Provider>
  )
}
 
export default App

 

 

As you can see in the above file we are configuring the store inside the Provider tag so that every component can access the global state that we have defined. And now we need to define the Users.jsx component as shown below

 

 

Users.jsx

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import React, {useRef, useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Form, Button, Table } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { addUser, removeUser, updateUser } from "./crud/crudAction";
 
function Users() {
  let { users } = useSelector((state) => {
    return state
  });
 
  let dispatch = useDispatch()
 
  const [update, setUpdate] = useState(false);
 
 
  const [currentId,setCurrentId] = useState(null)
  const [currentName,setCurrentName] = useState(null)
  const [currentAge,setCurrentAge] = useState(null)
 
  let [name, setName] = useState(null);
  let [age, setAge] = useState(null);
 
  let nameRef = useRef(null);
  let ageRef = useRef(null);
 
  let handleUsers = (e) => {
    e.preventDefault();
 
    let id = Date.now();
    let user = {
      id,
      name,
      age,
    };
    dispatch(addUser(user));
    nameRef.current.value = "";
    ageRef.current.value = "";
  };
 
  let handleEdit = (user) => {
    setUpdate(true);
    setCurrentId(user.id)
    setCurrentName(user.name)
    setCurrentAge(user.age)
    nameRef.current.value = user.name
    ageRef.current.value = user.age
  };
 
  let handleUpdate = (e) => {
    e.preventDefault()
 
    dispatch(updateUser(currentId,currentName,currentAge))
    setCurrentId(null)
    setCurrentAge(null)
    setCurrentName(null)
    setName(null)
    setAge(null)
    setUpdate(false)
 
    nameRef.current.value = ""
    ageRef.current.value = ""
 
  }
 
  return (
    <Container>
      <h1 className="text-center">React.js Redux CRUD</h1>
 
      {update ? (
        <Form onSubmit={handleUpdate}>
          <Form.Group>
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="text"
              onChange={(e) => setCurrentName(e.target.value)}
              ref={nameRef}
              placeholder="Enter name"
              required
            />
 
            <Form.Label>Age</Form.Label>
            <Form.Control
              type="number"
              onChange={(e) => setCurrentAge(e.target.value)}
              ref={ageRef}
              placeholder="Enter age"
              required
            />
          </Form.Group>
          <br />
          <Button type="submit">Update User</Button>
        </Form>
      ) : (
        <Form onSubmit={handleUsers}>
          <Form.Group>
            <Form.Label>Name</Form.Label>
            <Form.Control
              type="text"
              onChange={(e) => setName(e.target.value)}
              ref={nameRef}
              placeholder="Enter name"
              required
            />
 
            <Form.Label>Age</Form.Label>
            <Form.Control
              type="number"
              onChange={(e) => setAge(e.target.value)}
              ref={ageRef}
              placeholder="Enter age"
              required
            />
          </Form.Group>
          <br />
          <Button type="submit">Add User</Button>
        </Form>
      )}
 
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th>Edit User</th>
            <th>Delete User</th>
          </tr>
        </thead>
        <tbody>
          {users &&
            users.map((u) => (
              <tr>
                <td>{u.id}</td>
                <td>{u.name}</td>
                <td>{u.age}</td>
                <td>
                  <Button onClick={() => handleEdit(u)}>Edit User</Button>
                </td>
                <td>
                  <Button onClick={() => dispatch(removeUser(u.id))}>Delete User</Button>
                </td>
              </tr>
            ))}
        </tbody>
      </Table>
    </Container>
  );
}
 
export default Users;

 

 

As you can see we are using the useSelector hook to get the state or the data and then we are using the onDispatch hook to dispatch the various actions.

 

 

 

Recent Posts

  • PHP 7 OAuth2 Google Login & Logout Script to Store User in MySQL Database and Display in Browser
  • Python 3 Flask Project to Export Multiple PDF Documents to Word Docx Files Using pdf2docx Library in Browser
  • Build a Fixed Deposit Interest Calculator Using Amount and Time in Browser Using HTML5 & Javascript
  • Python 3 Script to Convert PDF Document to Microsoft Word DOCX File Using pdf2docx Library
  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme