added redux toolkit

Author: ligutanjm

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
         "plugin:@typescript-eslint/recommended",
         "prettier/@typescript-eslint",
         "plugin:prettier/recommended",
-        "plugin:react/recommended",
+        // "plugin:react/recommended",
     ],
     parserOptions: {
         ecmaVersion: 2018,
@@ -22,7 +22,7 @@ module.exports = {
             {
                 endOfLine: "auto",
             },
-            { usePrettierrc: true },
+            // { usePrettierrc: true },
         ],
     },
     settings: {

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.5.1",
     "eslint-plugin-react": "^7.19.0",
     "husky": "^4.2.3",
     "react": "^17.0.1",
@@ -37,7 +38,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.15",
     "@types/react-router-dom": "^5.1.7",

src/App.tsx

@@ -1,14 +1,12 @@
 import React from "react"
 import { Provider } from "react-redux"
-import { createStore, combineReducers, applyMiddleware } from "redux"
-import thunk from "redux-thunk"
 
-import items from "./app/redux/Item/Item.reducers"
+import { store } from "./app/redux/store"
 import RouteManager from "./app/RouteManager"
 
 // Setup Redux store with Thunks
-const reducers = combineReducers({ items })
-const store = createStore(reducers, applyMiddleware(thunk))
+// const reducers = combineReducers({ items })
+// const store = createStore(reducers, applyMiddleware(thunk))
 
 const App = () => {
     return (

src/app/pages/item/ItemList.tsx

@@ -1,33 +1,26 @@
 import React from "react"
-import { connect, useDispatch } from "react-redux"
-import { refreshList } from "../../redux/Item/Item.actions"
-import { ItemProps, Item } from "../../redux/Item/Item.types"
+import { useAppDispatch, useAppSelector } from "../../redux/hooks"
+import { fetchList } from "../../redux/Item/Item.slice"
 
-interface RootState {
-    items: any
-}
-const ItemList = ({ items }: ItemProps) => {
-    const dispatch = useDispatch()
+const ItemList = () => {
+    const items = useAppSelector((state) => state.items.items)
+    const loading = useAppSelector((state) => state.items.loading)
+    const dispatch = useAppDispatch()
     const handleClick = () => {
-        dispatch(refreshList)
+        dispatch(fetchList())
     }
     return (
         <div>
-            <button onClick={handleClick}>Refresh</button>
+            <button onClick={handleClick} disabled={loading}>
+                Refresh
+            </button>
             <ul>
-                {items.map((item: Item) => (
+                {items.map((item) => (
                     <li key={item.id}>{item.name}</li>
                 ))}
             </ul>
         </div>
     )
 }
 
-const mapStateToProps = (state: RootState) => {
-    console.log(state.items)
-    return {
-        items: state.items.items,
-    }
-}
-
-export default connect(mapStateToProps)(ItemList)
+export default ItemList

src/app/redux/Item/Item.actions.ts

@@ -0,0 +1,57 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"
+import type { RootState } from "../store"
+
+import { ItemServiceImpl } from "../../../domain/usecases/ItemService"
+import { ItemRepositoryImpl } from "../../../data/repositories/ItemRepositoryImpl"
+import { Item } from "../../../domain/entities/Item"
+// Define a type for the slice state
+interface CounterState {
+    loading: boolean
+    items: Array<Item>
+}
+
+// Define the initial state using that type
+const initialState: CounterState = {
+    loading: false,
+    items: [],
+}
+
+export const fetchList = createAsyncThunk("itemList/fetchList", async () => {
+    const itemrepo = new ItemRepositoryImpl()
+    const itemservice = new ItemServiceImpl(itemrepo)
+    const items = await itemservice.GetItems()
+    console.log(items)
+    return items
+})
+export const itemSlice = createSlice({
+    name: "itemList",
+    // `createSlice` will infer the state type from the `initialState` argument
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder.addCase(fetchList.fulfilled, (state, action) => {
+            return {
+                ...state,
+                items: action.payload,
+                loading: false,
+            }
+        })
+        builder.addCase(fetchList.pending, (state) => {
+            return {
+                ...state,
+                loading: true,
+            }
+        })
+        builder.addCase(fetchList.rejected, (state) => {
+            return {
+                ...state,
+                loading: false,
+            }
+        })
+    },
+})
+
+// Other code such as selectors can use the imported `RootState` type
+export const items = (state: RootState) => state.items.items
+
+export default itemSlice.reducer

src/app/redux/Item/Item.reducers.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import type { RootState, AppDispatch } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/app/redux/Item/Item.slice.ts

@@ -0,0 +1,13 @@
+import { configureStore } from "@reduxjs/toolkit"
+import { itemSlice } from "./Item/Item.slice"
+
+export const store = configureStore({
+    reducer: {
+        items: itemSlice.reducer,
+    },
+})
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch