chore: Create and implement a basic todos redux store

Author: weaponsforge

client/jsconfig.json

@@ -1,7 +1,12 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@/hooks/*": ["./src/lib/hooks/*"],
+      "@/public/*": ["./public/*"],
+      "@/services/*": ["./src/lib/services/*"],
+      "@/store/*": ["./src/lib/store/*"],
+      "@/utils/*": ["./src/lib/utils/*"]
     }
   }
 }

client/package-lock.json

@@ -15,10 +15,12 @@
     "export": "npm run build && next export"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-redux": "^8.0.5"
   }
 }

client/package.json

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import Page from '@/common/layout/page'
 import { Inter } from 'next/font/google'
 import styles from '@/styles/Home.module.css'
+import navlinks from './items.json'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,9 +17,11 @@ export default function HomeComponent() {
             </h1>
           </div>
 
-          <Link href="/usesyncexternalstore" className={styles.card}>
-            useSyncExternalStore
-          </Link>
+          {navlinks.map((item, index) => (
+            <Link href={item.link} key={index} className={styles.card}>
+              {item.name}
+            </Link>
+          ))}
         </div>
       </main>
     </Page>

client/src/components/home/index.js

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "useSyncExternalStore",
+    "link": "/usesyncexternalstore"
+  },
+  {
+    "name": "redux toolkit",
+    "link": "/redux"
+  }
+]

client/src/components/home/items.json

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import Page from '@/common/layout/page'
+
+function ReduxComponent ({
+  todos,
+  addTodo,
+  deleteTodo
+}) {
+  return (
+    <Page>
+      <h2>
+        Redux Toolkit
+      </h2>
+
+      <button onClick={addTodo}
+        style={{ marginTop: '24px' }}>
+        Add Todo
+      </button>
+
+      <ul style={{ marginTop: '24px' }}>
+        {(todos).map(((item, id) => (
+          <li key={id}>
+            <span>id: {item.id}, {item.text}</span>
+            <span>
+              <button onClick={() => deleteTodo(item.id)}>
+                [ x ]
+              </button>
+            </span>
+          </li>
+        )))}
+      </ul>
+    </Page>
+  )
+}
+
+export default ReduxComponent

client/src/components/redux/index.js

@@ -0,0 +1,18 @@
+import { combineReducers } from 'redux'
+import { configureStore } from '@reduxjs/toolkit'
+
+import todoSlice from '@/lib/store/todos/todoSlice'
+
+// Reducers
+const combinedReducer = combineReducers({
+  todos: todoSlice
+})
+
+const rootReducer = (state, action) => {
+  return combinedReducer(state, action)
+}
+
+// Global store
+export const store = configureStore({
+  reducer: rootReducer
+})

client/src/lib/store/store.js

@@ -0,0 +1,48 @@
+import {
+  createSlice,
+  createEntityAdapter
+} from '@reduxjs/toolkit'
+
+const STATES = {
+  IDLE: 'idle',
+  PENDING: 'pending'
+}
+
+const todosAdapter = createEntityAdapter({
+  selectId: (todo) => todo.id
+})
+
+const todoSlice = createSlice({
+  name: 'todos',
+  initialState: todosAdapter.getInitialState({
+    loading: STATES.IDLE,
+    error: '',
+    success: '',
+    todo: null
+  }),
+  reducers: {
+    todoReceived (state, action) {
+      const id = Math.random().toString(36).substring(2, 8)
+
+      state.loading = STATES.IDLE
+      state.todo = { ...action.payload, id }
+      todosAdapter.addOne(state, state.todo)
+
+    },
+    todoDelete (state, action) {
+      todosAdapter.removeOne(state, action.payload)
+    },
+    todosReceived (state, action) {
+      state.loading = STATES.IDLE
+      todosAdapter.setAll(state, action.payload)
+    }
+  }
+})
+
+export const {
+  todoReceived,
+  todosReceived,
+  todoDelete
+} = todoSlice.actions
+
+export default todoSlice.reducer