Rajatgms / react-shop

React Shop is a demo application to showcase the integration of React hooks, React-redux hooks and Redux-toolkit.

React Shop is a React hooks based demo e-commerce application. Main purpose of the application to showcase how to integrate react-hooks, react-toolkit, react-redux react-bootstrap and react-route.

---

Local setup

• npm install
• npm start

---

Live

GitHub Live Page - React-Shop

• URL - https://rajatgms.github.io/react-shop

---

Tech Overview

Used Redux-Toolkit and Redux-Thunk for state management of React Shop Application.

• React-Redux hooks API - useSelector and useDispatch to interact with store.
• Redux-Toolkit API for state management.

Benefits of using state management -

1. Centralized single store which act as source of truth for whole application state.
2. No prop-drilling.
3. Business logic at Redux layer.
4. Easy to scale and refactor application.

Benefits of using redux-toolkit -

1. Commonly required utility packages are included and configured in redux-toolkit.
   • nanoid
   • Redux-Thunk
   • Redux-Devtools
   • immer
   • Reselect
   • NgRx and more
2. No need to handle default return in reducers.
3. Automatically create action type and static action creator. CreateSlice API
4. Reducer uses immer draft state to avoid accidentally mutation state in a reducer.
5. Easy approach to handle thunk action creator asynchronous request lifecycle. createAsyncThunk API
6. Many more features to handle common use cases encounter in application development.

---

Other code branches

1. react-hook-base

   Base project created using React Hooks with no state management.

2. react-hook-redux-hoc

   Used Redux and React-Redux connect HOC - mapStateToProps and mapDispatchToProps for state management.

3. react-hook-redux-thunk-hook

   Used Redux and React-Redux Hooks for state management.

4. react-hook-redux-toolkit

   Used Redux-Toolkit and React-Redux Hooks for state management.