Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sofiane-abou-abderrahim/react-redux-cart

React Redux Cart is a demo app built with ReactJS, Redux, and Firebase. 🛒 It allows you to add products to the cart with real-time notifications, manage your cart by adding, removing, or clearing items, and syncs data in real-time with Firebase. 🌐 The app uses Redux Toolkit to handle async actions with Redux Thunks.
https://github.com/sofiane-abou-abderrahim/react-redux-cart

action-creator-thunk async backend firebase http-requests javascript react-redux react-redux-toolkit reactjs redux-devtools rest-api server useeffect

Last synced: 1 day ago
JSON representation

React Redux Cart is a demo app built with ReactJS, Redux, and Firebase. 🛒 It allows you to add products to the cart with real-time notifications, manage your cart by adding, removing, or clearing items, and syncs data in real-time with Firebase. 🌐 The app uses Redux Toolkit to handle async actions with Redux Thunks.

Awesome Lists containing this project

README 

        
# Redux Deep Dive



## Taking a Closer Look



- Handling Async Tasks With Redux

- Where To Put Your Code

- The Redux DevTools



# Steps



## 0. Starting Project



1. add a `README.md` file

2. run `npm install`

3. run `npm start`

4. add a `.gitignore` file & add `node_modules` inside of it



## 1. Refresher / Practice: Part 1/2



1. run `npm install @reduxjs/toolkit`

2. run `npm install react-redux`

3. set up the Redux logic & connect it to the React app

   1. add a `store` folder & inside a `index.js` file to set up the Redux store and so on

   2. create multiple slices: one `cart-slice.js` file for managing the cart & one `ui-slice.js` for the user interface logic

   3. use `createSlice()` to create the different slices & export them as well as their actions

   4. create the store in `store/index.js` with help of `configureStore` & set up the root reducer inside of it & export it

   5. provide the exported store to the application to make effect in the `src/index.js` file with help of the `` component

4. in `CartButton.js`, implement the logic to toggle the cart with help of `useDispatch` & the `uiActions`

5. in `App.js`, render the `` component conditionally based on the `uiSlice` value that you extract with help of `useSelector`

6. updating the cart items content when we click the `Add to Cart`, the `+` & `-` and the cart badge buttons

   1. create the `cartSlice` with help of `createSlice` in `cart-slice.js`

   2. set up the `cartSlice` logic



## 2. Refresher / Practice: Part 2/2



1. set up the logic for the `removeItemFromCart` function in `cart-slice.js`

2. export the `cartSlice` as default

3. export the `cartActions`

4. in `store/index.js`, merge this `cartSlice` into the overall Redux store

5. wire up the cart actions

   1. add a `DUMMY_PRODUCTS` array in `Products.js` & set the properties based on the properties in `cart-slice.js`

   2. in `ProductItem.js`, wire the `Add to Cart` button to the `addItemToCart` function in `cart-slice.js`

   3. update the cart badge in `CartButton.js` by reading the cart slice `totalQuantity` with help of `useSelector()`

   4. render the cart correctly in `Cart.js` by reading the cart slice `items` with help of `useSelector()`

   5. make the `+` & `-` buttons work in `CartItem.js` with help of `useDispatch()` & `cartActions`



## 3. Redux & Async Code



1. create a new project in Firebase named `react-redux-cart`

2. keep the link to where you will send your HTTP requests



## 4. Using useEffect with Redux



1. get hold of the overall cart with help of `useSelector()` in `App.js`

2. use `useEffect()` to watch for changes in the cart state

3. inside of it, send a HTTP request to Firebase



## 5. Handling Http States & Feedback with Redux



1. add the new `Notification.js` file inside the `UI` folder

2. use this file to show the notification & handle errors in the `useEffect()` function in `App.js`

3. manage the notification with help of Redux by adding a `notification` property to the `initialState` & a `showNotification` method

4. dispatch the notification when starting sending the data, the data is sent successfully & if there is an error in `App.js`

5. use this new `notification` UI state from `ui-slice.js` with help of `useSelector()` to render the `` component conditionally in `App.js`

6. in `App.js`, make sure that you don't send the cart when the app runs for the first time with help of an `isInitial` variable



## 6. Using an Action Creator Thunk



1. move the code for sending cart data out of the `App.js` component into an action creator

2. create a new `sendCartData` action creator in `cart-slice.js`

3. dispatch the `sendCartData` action inside the `useEffect()` function in `App.js`



## 7. Getting Started with Fetching Data



1. move the `sendCartData` action creator out of `cart-slice.js` into a new `cart-actions.js` file

2. build another `fetchCartData` action creator that fetches the cart when the application loads in `cart-actions.js`

3. add a new `replaceCart` function inside of the `cartSlice` function in `cart-slice.js`

4. dispatch the `cartData` with help of the `replaceCart()` from the `cartActions` inside the `fetchCartData` action creator in `cart-actions.js`

5. call `fetchCartData` inside a new `useEffect` function in `App.js`



## 8. Finalizing the Fetching Logic



1. fix the issue where we automatically resend the cart when the application loads

   1. add a new `changed` property in the `cartSlice` function in `cart-slice.js`

   2. dispatch `sendCartData` conditionally in `App.js`

   3. in `cart-actions.js`, send a new object without the `changed` property instead of the overall `cart` to Firebase

2. fix the bug where when you clear the cart entirely then reload and add an item to cart again or show the cart again

   1. when the cart is cleared entirely, there is no `items` key anymore in Firebase

   2. in `cart-actions.js`, where we replace the cart with `cartData`, transform the `cartData` so that the payload is an object that always has an `items` key