Thunk example

template/src/features/counter/Counter.js

@@ -5,13 +5,17 @@ import {
   increment,
   incrementByAmount,
   selectCount,
+  isLoading,
+  incrementByAmountAsync
 } from './counterSlice';
 import styles from './Counter.module.css';
 
 export function Counter() {
   const count = useSelector(selectCount);
+  const loading = useSelector(isLoading);
   const dispatch = useDispatch();
   const [incrementAmount, setIncrementAmount] = useState(2);
+  const [incrementAmountAsync, setIncrementAmountAsync] = useState(2);
 
   return (
     <div>
@@ -50,6 +54,27 @@ export function Counter() {
           Add Amount
         </button>
       </div>
+      <div className={styles.row}>
+        <input
+          className={styles.textbox}
+          aria-label="Set async increment amount"
+          value={incrementAmountAsync}
+          onChange={e => setIncrementAmountAsync(e.target.value)}
+        />
+        <button
+          className={styles.button}
+          onClick={() =>
+            dispatch(
+              incrementByAmountAsync({
+                amount: Number(incrementAmountAsync) || 0
+              })
+            )
+          }
+        >
+          {!loading && "Add Amount Async"}
+          {loading && "loading"}
+        </button>
+      </div>
     </div>
   );
 }

template/src/features/counter/Counter.module.css

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 10px;
 }
 
 .row:first-child {

template/src/features/counter/counterSlice.js

@@ -4,6 +4,8 @@ export const slice = createSlice({
   name: 'counter',
   initialState: {
     value: 0,
+    isLoading: false,
+    err: '',
   },
   reducers: {
     increment: state => {
@@ -19,10 +21,42 @@ export const slice = createSlice({
     incrementByAmount: (state, action) => {
       state.value += action.payload.amount;
     },
-  },
+    incrementByAmountAsyncRequest: state => {
+      state.isLoading = true;
+      state.err = ''
+    },
+    incrementByAmountAsyncSuccess: (state, action) => {
+      state.value += action.payload.amount;
+      state.isLoading = false;
+    },
+    incrementByAmountAsyncFailure: (state, action) => {
+      state.isLoading = false;
+      state.err = action.payload;
+    }
+  }
 });
 
 export const selectCount = state => state.counter.value;
-export const { increment, decrement, incrementByAmount } = slice.actions;
+export const isLoading = state => state.counter.isLoading;
+
+export const {
+  increment,
+  decrement,
+  incrementByAmount,
+  incrementByAmountAsyncRequest,
+  incrementByAmountAsyncSuccess,
+  incrementByAmountAsyncFailure
+} = slice.actions;
 
 export default slice.reducer;
+
+export const incrementByAmountAsync = payload => async dispatch => {
+  dispatch(incrementByAmountAsyncRequest());
+  try {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+  } catch (err) {
+    dispatch(incrementByAmountAsyncFailure(err.toString()));
+    return;
+  }
+  dispatch(incrementByAmountAsyncSuccess(payload));
+};

template/src/store.js

@@ -1,8 +1,9 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore, getDefaultMiddleware  } from '@reduxjs/toolkit';
 import counterReducer from './features/counter/counterSlice';
 
 export default configureStore({
   reducer: {
     counter: counterReducer,
   },
+  middleware: [ ...getDefaultMiddleware() ],
 });