chore: Test page re-renders when loading and processing multiple redux stores

Author: weaponsforge

client/src/components/users/index.js

@@ -2,25 +2,30 @@ import PropTypes from 'prop-types'
 import Page from '@/common/layout/page'
 import Card from '@/common/ui/card'
 import UserListComponent from '@/domain/users/userlist'
+import TodoListComponent from '@/domain/redux/todolist'
 
 function UsersComponent ({
   addUser,
-  deleteUser
+  deleteUser,
+  deleteTodo,
+  addTodo
 }) {
   return (
     <Page>
       <h2>
         Redux Toolkit - Users
       </h2>
 
-      <p> Testing page re-renders and data rendering from a redux store inside a deeply-nested component.</p>
+      <p>Testing page re-renders and data rendering from multiple redux stores (Users and ToDo) inside regular and deeply-nested components.</p>
 
       <button onClick={addUser}
         style={{ marginTop: '24px' }}>
         Add User
       </button>
 
       <br /><br />
+      <h3>Users</h3>
+      <br />
 
       {/** A deeply-nested component */}
       <Card>
@@ -36,6 +41,17 @@ function UsersComponent ({
           </Card>
         </Card>
       </Card>
+
+      <br />
+      <button onClick={addTodo}
+        style={{ marginTop: '24px' }}>
+        Add Todo
+      </button>
+
+      <br /><br />
+      <h3>ToDo</h3>
+
+      <TodoListComponent deleteTodo={deleteTodo} />
     </Page>
   )
 }

client/src/pages/users/index.js

@@ -1,5 +1,6 @@
 import { useDispatch } from 'react-redux'
 import { userReceived, userDelete } from '@/lib/store/users/usersSlice'
+import { todoDelete, todoReceived } from '@/lib/store/todos/todoSlice'
 
 import UsersComponent from '@/components/users'
 
@@ -16,10 +17,22 @@ function Users () {
     dispatch(userDelete(id))
   }
 
+  const addTodo = () => {
+    dispatch(todoReceived({
+      text: 'Hello, world!'
+    }))
+  }
+
+  const deleteTodo = (id) => {
+    dispatch(todoDelete(id))
+  }
+
   return (
     <UsersComponent
       addUser={addUser}
       deleteUser={deleteUser}
+      deleteTodo={deleteTodo}
+      addTodo={addTodo}
     />
   )
 }