v1.0.3

client/src/components/users/index.js

@@ -0,0 +1,64 @@
+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,
+  deleteTodo,
+  addTodo
+}) {
+  return (
+    <Page>
+      <h2>
+        Redux Toolkit - Users
+      </h2>
+
+      <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>
+        <Card>
+          <Card>
+            <Card>
+              <Card>
+                <Card>
+                  <UserListComponent deleteUser={deleteUser} />
+                </Card>
+              </Card>
+            </Card>
+          </Card>
+        </Card>
+      </Card>
+
+      <br />
+      <button onClick={addTodo}
+        style={{ marginTop: '24px' }}>
+        Add Todo
+      </button>
+
+      <br /><br />
+      <h3>ToDo</h3>
+
+      <TodoListComponent deleteTodo={deleteTodo} />
+    </Page>
+  )
+}
+
+UsersComponent.propTypes = {
+  addUser: PropTypes.func,
+  deleteUser: PropTypes.func
+}
+
+export default UsersComponent

client/src/domain/users/userlist/index.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+
+function UserListComponent ({ deleteUser }) {
+  const {ids, entities: users } = useSelector(state => state.users)
+
+  return (
+    <ul style={{ marginTop: '24px' }}>
+      {(ids).map(((id, index) => (
+        <li key={index}>
+          <span>id: {users[id].id}, {users[id].text}</span>
+          <span>
+            <button onClick={() => deleteUser(id)}>
+              [ x ]
+            </button>
+          </span>
+        </li>
+      )))}
+    </ul>
+  )
+}
+
+UserListComponent.propTypes = {
+  deleteUser: PropTypes.func
+}
+
+export default UserListComponent

client/src/lib/store/constants.js

@@ -0,0 +1,8 @@
+const STATES = {
+  IDLE: 'idle',
+  PENDING: 'pending'
+}
+
+export {
+  STATES
+}

client/src/lib/store/store.js

@@ -2,10 +2,12 @@ import { combineReducers } from 'redux'
 import { configureStore } from '@reduxjs/toolkit'
 
 import todoSlice from '@/lib/store/todos/todoSlice'
+import usersSlice from '@/lib/store/users/usersSlice'
 
 // Reducers
 const combinedReducer = combineReducers({
-  todos: todoSlice
+  todos: todoSlice,
+  users: usersSlice
 })
 
 const rootReducer = (state, action) => {

client/src/lib/store/todos/todoSlice.js

@@ -7,10 +7,7 @@ import {
   createEntityAdapter
 } from '@reduxjs/toolkit'
 
-const STATES = {
-  IDLE: 'idle',
-  PENDING: 'pending'
-}
+import { STATES } from '@/lib/store/constants'
 
 // Entiti adapter
 const todosAdapter = createEntityAdapter({

client/src/lib/store/users/usersSlice.js

@@ -0,0 +1,51 @@
+// Notes:
+// https://redux.js.org/tutorials/essentials/part-6-performance-normalization#normalized-state-structure
+// https://redux.js.org/tutorials/essentials/part-6-performance-normalization#optimizing-the-posts-list
+
+import {
+  createSlice,
+  createEntityAdapter
+} from '@reduxjs/toolkit'
+
+import { STATES } from '@/lib/store/constants'
+
+// Entiti adapter
+const usersAdapter = createEntityAdapter({
+  selectId: (user) => user.id
+})
+
+// Slice
+const usersSlice = createSlice({
+  name: 'users',
+  initialState: usersAdapter.getInitialState({
+    loading: STATES.IDLE,
+    error: '',
+    success: '',
+    todo: null
+  }),
+  reducers: {
+    userReceived (state, action) {
+      const id = Math.random().toString(36).substring(2, 8)
+
+      state.loading = STATES.IDLE
+      state.todo = { ...action.payload, id }
+      usersAdapter.addOne(state, state.todo)
+
+    },
+    userDelete (state, action) {
+      usersAdapter.removeOne(state, action.payload)
+    },
+    usersReceived (state, action) {
+      state.loading = STATES.IDLE
+      usersAdapter.setAll(state, action.payload)
+    }
+  }
+})
+
+export const {
+  userReceived,
+  usersReceived,
+  userDelete
+} = usersSlice.actions
+
+export default usersSlice.reducer

client/src/pages/users/index.js

@@ -0,0 +1,40 @@
+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'
+
+function Users () {
+  const dispatch = useDispatch()
+
+  const addUser = () => {
+    dispatch(userReceived({
+      text: 'User anonymous!'
+    }))
+  }
+
+  const deleteUser = (id) => {
+    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}
+    />
+  )
+}
+
+export default Users