Redux

Chapter1/.gitignore

@@ -0,0 +1 @@
+/node_modules

Chapter2-end/.gitignore

@@ -0,0 +1 @@
+/node_modules

Chapter2-start/package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^1.3.4",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.1.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

Chapter2-start/src/App.js

@@ -1,15 +1,22 @@
+import { useSelector } from 'react-redux';
 import './App.css';
 import Account from './components/Account';
 import Bonus from './components/Bonus';
+import Reward from './components/Reward';
+
 function App() {
+  const amount = useSelector(state => state.account.amount);
+  const bonus = useSelector(state => state.bonus.point)
+  const pending = useSelector(state => state.account.pending);
   return (
     <div className="App">
       <h4>App</h4>
-      <h3>Current Amount : </h3>
-      <h3>Total Bonus : </h3>
+      <h3>Current Amount : {pending ? 'Loadiiing...' : amount} </h3>
+      <h3>Total Bonus : {pending ? 'Loading....' : bonus}</h3>
 
       <Account></Account>
       <Bonus></Bonus>
+      <Reward></Reward>
     </div>
   );
 }

Chapter2-start/src/components/Account.js

@@ -1,33 +1,24 @@
-import { useState } from 'react';
-
-function Account() {
-  const [account, setAccount] = useState({ amount: 0 });
-  const [value, setValue] = useState(0);
-
-  const increment = () => {
-    setAccount({ amount: account.amount + 1 });
-  };
-
-  const decrement = () => {
-    setAccount({ amount: account.amount - 1 });
-  };
+import { useSelector, useDispatch } from 'react-redux';
+import { increment, decrement, incrementByAmount, getUser } from '../slices/accountSlice';
 
-  const incrementByAmount = (value) => {
-    setAccount({ amount: account.amount + value });
-  };
+function Account() {
+  const amount = useSelector(state => state.account.amount);
+  const dispatch = useDispatch();
 
   return (
     <div className="card">
       <div className="container">
         <h4>
           <b>Account Component</b>
         </h4>
-        <h3>Amount:${account.amount}</h3>
-        <button onClick={increment}>Increment +</button>
-        <button onClick={decrement}>Decrement -</button>
-        <input type="text" onChange={(e) => setValue(+e.target.value)}></input>
-        <button onClick={() => incrementByAmount(value)}>
-          Increment By {value} +
+        <h3>Amount:${amount}</h3>
+        <button onClick={() => dispatch(increment())}>Increment +</button>
+        <button onClick={() => dispatch(decrement())}>Decrement -</button>
+        <button onClick={() => dispatch(incrementByAmount(1011))}>
+          Increment By +
+        </button>
+        <button onClick={() => dispatch(getUser(1))}>
+          get user
         </button>
       </div>
     </div>

Chapter2-start/src/components/Bonus.js

@@ -1,20 +1,18 @@
-import { useState } from 'react';
+import { useSelector, useDispatch } from "react-redux";
+import { increment } from "../slices/bonusSlice";
 
 function Bonus() {
-  const [points, setPoints] = useState({ value: 0 });
+  const point = useSelector(state => state.bonus.point);
+  const dispatch = useDispatch();
 
-  const increment = () => {
-    setPoints({ value: points.value + 1 });
-  };
   return (
     <div className="card">
       <div className="container">
         <h4>
           <b>Bonus Component</b>
         </h4>
-        <h3>Total Point : ${points.value}</h3>
-
-        <button onClick={increment}>Increment +</button>
+        <h3>Total Point : ${point}</h3>
+        <button onClick={() => dispatch(increment())}>Increment +</button>
       </div>
     </div>
   );

Chapter2-start/src/components/Reward.js

@@ -0,0 +1,21 @@
+import { useSelector, useDispatch } from "react-redux";
+import { increment } from "../reducers/reducer";
+
+function Reward() {
+    const point = useSelector(state => state.reward.rewardPoints);
+    const dispatch = useDispatch();
+
+    return (
+        <div className="card">
+            <div className="container">
+                <h4>
+                    <b>Reward Component</b>
+                </h4>
+                <h3>Total Point : ${point}</h3>
+                <button onClick={() => dispatch(increment())}>Increment +</button>
+            </div>
+        </div>
+    );
+}
+
+export default Reward;

Chapter2-start/src/index.js

@@ -3,12 +3,27 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { configureStore } from '@reduxjs/toolkit';
+import accountReducer from './slices/accountSlice';
+import bonusReducer from './slices/bonusSlice';
+import { rewardReducer } from './reducers/reducer';
+import { Provider } from 'react-redux';
+
+const store = configureStore({
+  reducer: {
+    account: accountReducer,
+    bonus: bonusReducer,
+    reward: rewardReducer
+  }
+})
 
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <Provider store={store}>
       <App />
+    </Provider>
   </React.StrictMode>
 );
 

Chapter2-start/src/reducers/reducer.js

@@ -0,0 +1,13 @@
+import { createAction, createReducer } from '@reduxjs/toolkit'
+
+export const increment = createAction('reward/increment')
+
+const initialState = { rewardPoints: 0 }
+
+export const rewardReducer = createReducer(initialState, (builder) => {
+    builder
+        .addCase(increment, (state, action) => {
+            state.rewardPoints++
+        })
+})
+

Chapter2-start/src/slices/accountSlice.js

@@ -0,0 +1,51 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import axios from 'axios'
+
+export const getUser = createAsyncThunk(
+    'account/getUser',
+    async (userId, thunkAPI) => {
+        await new Promise((resolve, rejected) => {
+            setTimeout(() => {
+                resolve()
+            }, 5000);
+        })
+        const { data } = await axios(`http://localhost:8080/accounts/${userId}`);
+
+        return data;
+    }
+)
+
+const initialState = {
+    amount: 1,
+    pending: false
+}
+
+export const accountSlice = createSlice({
+    name: 'account',
+    initialState,
+    reducers: {
+        increment: (state) => {
+            state.amount += 1
+        },
+        decrement: (state) => {
+            state.amount -= 1
+        },
+        incrementByAmount: (state, action) => {
+            state.amount += action.payload
+        }
+    },
+    extraReducers: (builder) => {
+        builder.addCase(getUser.pending, (state, action) => {
+            state.pending = true;
+        }).addCase(getUser.fulfilled, (state, action) => {
+            state.pending = false;
+        }).addCase(getUser.rejected, (state, action) => {
+            state.pending = false;
+        })
+    }
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement, incrementByAmount } = accountSlice.actions
+
+export default accountSlice.reducer