Lets see Redux (theoretically)

let talk about redux,

Redux is simply a store of variables/states which can use through out the whole application , you can set/update the stats/variables, you can use them on any components.

Theoretical explanation

when application start it declare some variables/state in store of applications with initial values,

then on any component you can update those states/variables with some functions/actions that can be access from component but need to connect that component to the store of application using redux so you can update the state/variable

to get those variable/states in any component you also need to connect that component too with application store using redux.

these variables can help you through out the applications when you need data like login user, e-commerce cart data, and so on

Key factors

1. First config your store with application and make them connect to each other , image will show you the view how to connect
2. create a folder with name redux or any and inside create index.js with this code init.

redux config with application (index file)

3. now create a file name rootRedux or any with this code init

connect your store states for available in application (rootReducer file)

now suppose you have a e-commerce website and you want to use redux init , so let take currently 2 things auth for user data and things like token etc, products that application will display to users and cart which is user shopping cart, in redux folder we will create three more folders name as , Auth,Product,Cart and each folder will have 2 files Action.js and Reducer.js

4. Actions.js file have all the actions/functions that can help you out to update the store states,

5. Reducer.js is the file in which you will define variables/states of particular file like if auth then useData, token, etc or like product then productsList, filterProducts etc same with cart like AddToCartItems , paymentMethods, etc

action file

reducer file

now let see how we can connect a component to redux store

now if you see i have saveUserData function from mapDispatchToProps this function is actually action which i create on action.js file ,also show on picture earlier, and if you see mapStateToProps you can see my state of store name auth which i define in rootReducer file this auth object have userData key shown in pic , combine the puzzle now ,

1. I declare the sate with userData which is basically a key of auth object connect it with application in combine reducer , file name rootReducer,
2. I declare a action/function name saveUserData in action file which will update the state userData
3. I just connect the component to store and use actions to set state and use state to display to use ,

you can checkout my youtube tutorial for more info and detail view of this all

check out also

faceboook: https://www.facebook.com/zain.ahmed.75491
instagram: https://www.instagram.com/zainbinfurqan/
github: https://github.com/zainbinfurqan
twitter: https://twitter.com/zainahmed241995
linkdin: https://www.linkedin.com/in/zain-ahmed-231349132/

facebook page: https://www.facebook.com/XendCode
instagram account: https://www.instagram.com/deve_lopmenteducation/