Scribd
Upload
5 views

Redux Example - 27th July

Uploaded by

xisajac957
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Redux Example - 27th July

Uploaded by

xisajac957
Copyright
© © All Rights Reserved
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