Scribd
Upload
30 views3 pages

Redux Example - 27th July

Uploaded by

srsjava01.2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views3 pages

Redux Example - 27th July

Uploaded by

srsjava01.2023
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

7/31/22, 4:37 PM Redux Example

React182022
React 7:30 PM

Redux Example
Sudhakar Sharma • Jul 27

MVC
- Model -View - Controller

Model
- It represents the data we are working with.
- It contains data logic.
- It contains data validation rules
- It contains meta data [changes and updates]
- It is reffered as "single-source-of-truth"

View
- UI
- It defines view and partial view
- It trigers the actions

Controller
- It comprises actions to perform
- It is reffered as subscriber
- It is a reducer.
- It handles the overall communication between model and view.

User Clicks on "Add to Cart" => Collect the Product Details => Store in Redux Store => Assign to
CartItems[] => Bind to UI

Step-1: Install Redux Tool Kit for your project

> npm install @reduxjs/toolkit react-redux --save

Install redux dev tools for your chrome browser

Step-2: Create a Redux slicer

- In redux slicer is used to configure the initial state and actions.


cartItems:any[] = []
cartCount:number=0
addToCart:any;
createSlicer

- Add a new file into project

"CartSlicer.tsx"

https://classroom.google.com/u/0/c/NDk2Mjk0NDc1NzI4/m/NTM3NDk0NDY0NjIz/details 1/3
7/31/22, 4:37 PM Redux Example

importReact182022
{ createSlice } from "@reduxjs/toolkit";
React 7:30 PM

const initialState = {
cartItems: [],
cartCount : 0
}

const cartSlice = createSlice({


name: 'cart',
initialState,
reducers: {
addToCart(state:any, action){
state.cartItems.push(action.payload);
state.cartCount = state.cartItems.length;
}
}
});
export const { addToCart } = cartSlice.actions;
export default cartSlice.reducer;

Note: Slice comprises of


a) initial state
b) name
c) reducer : actions

Step-3: Configure Store


"store.tsx"

import { configureStore } from "@reduxjs/toolkit";


import CartSlicer from "./CartSlicer";

export default configureStore({


reducer: {
store : CartSlicer //initial state[cartItems, count], actions
}
})

Note: It creates a store centralized and adds the references for


a) cartItems[]
b) carCount

Step-4: Configure UI

"ProductsComponent.tsx" [shopping cart page] with Add to cart

import { addToCart } from "./CartSlicer";


import { useDispatch } from "react-redux";

const dispatch = useDispatch();

th dl AddT C t ( d t ) {
https://classroom.google.com/u/0/c/NDk2Mjk0NDc1NzI4/m/NTM3NDk0NDY0NjIz/details 2/3
7/31/22, 4:37 PM Redux Example
const handleAddToCart = (product:any) => {
React182022
dispatch(addToCart(product));
React 7:30 PM
}

{
products.map(product=>
<card>
<Button onClick={()=> handleAddToCart(product)} className="w-100" variant="contained" >
<span className="bi bi-cart4"></span> Add to Cart</Button>

</card>
)
}

Step-5: Configure store at app level with a provider

index.tsx

import { Provider } from 'react-redux';


import store from './ishop/store'; [store.tsx]

<React.StrictMode>
<Provider store={store} >
<IshopIndexComponent />
</Provider>
</React.StrictMode>,

React Native, Ionic - Mobile - PWA

Redux.docx
Word

Class comments

https://classroom.google.com/u/0/c/NDk2Mjk0NDc1NzI4/m/NTM3NDk0NDY0NjIz/details 3/3

You might also like