To install react-redux
npm install redux react-redux
The basic diffrence between the subscribe and the consumer( Context ) is that we don’t need to explicitely deal with the data but In the subscribe the data will be availble as the data changes
Now we have to create a store folder and create a file in which we have to use like ⇒
yaha par ye dhyan rakhna hai ki agar we have multiple state and we are returning only the updated one then that will create a big problem in the functionality so we have to return all other states as it is in every if else condition otherwise it will overwrite the initialstate inplace of merging ( we will do this very comfortabley with the redux toolkit )
Provide data
Now We have to provide the reducer functions so that the function is used to update the states in the store.
Jaise hme context mai data provide karna rehta hai
Waise hi hme provider provide karna padega but for using the data appWide we will provide the store provider in the index.js
Important ⇒ we have to provide the same props as store we can’t give the diffrent name like Store or sTore or something else
Use the data from store in componet
Now we have provided the store the data to the whole application So we can consume the data of the store by a hook provided by react-redux that is useSelector
we have two hooks useSelector and useStore ⇒ when we have to use a puticular state then we have to use useSelector But in case where we have to use multiple states in the store then we can use the useStore
import {useSelector} from "react-redux"; const votes=useSelector(states=>states.votes)// means it will give the value of votes in state object
Update the state from component
Ab agar hum kisi state ki value ko change karna chahte hai from a component then we have to dispatch the action
we will use the useDispatch hook from the react-redux to dispatch the action from component
these two handler are bind with two buttons
Now we can also send the additional data in the dispatch function to
Now if we have to do this we also have to update this in our reducer function
