INSTRUCTION.txt

****************************************************************************************************
1. Create a new React app with TypeScript and Redux Toolkit:

- Go to redux document (https://redux.js.org/) to know how to use Redux with TypeScript.
Now, you will see that there is a Redux+TS template for Create-React-App.

- Standard Redux Toolkit Project Setup with TypeScript:
    + To create a React app in the current folder:
        npx create-react-app . --template redux-typescript
    + To create a React app in a new folder:
        npx create-react-app my-app --template redux-typescript


****************************************************************************************************
2. Notes:
- Go to src/app/hooks.ts, you will see that we should use `useAppDispatch` and `useAppSelector`
instead of `useDispatch` and `useSelector`.


****************************************************************************************************
3. Project setup:
- Open tsconfig.json:
    + In compilerOptions, add:
        "baseUrl": "./src"


****************************************************************************************************
4. ESLint, Prettier, Husky (uncompleted):

- eslint:
    + Because we used create-react-app script, we are already have eslint libraries, 
    so we don't need to add them to our package.json file explicitly.
    + Add configuration files for eslint:
        .eslintrc
        .eslintignore

- prettier:
    + Install:
        npm install --save-dev --save-exact prettier
    + Add configuration files for prettier:
        .prettierrc
        .prettierignore


****************************************************************************************************
5. Apply a middleware in redux-toolkit:
- You must know:
    + redux-saga is a redux middleware.

- If you want to customize the list of middleware, 
you can supply an array of middleware functions to configureStore.
(https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage)

- Redux Saga:
    + Install:
        npm install redux-saga

- Apply redux-saga middleware:
Go to src/app/store.ts, customize configureStore to apply redux-saga and other middlewares.
For example:
    const sagaMiddleware = createSagaMiddleware();
    export const store = configureStore({
      reducer: {
        counter: counterReducer,
      },
      middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware().concat(sagaMiddleware),
    });

- Create and run Sagas.