npm install react-redux

What is Redux ?, what are all these terms ?:- Redux, Flux, React Redux, Redux toolkit

I am gonna talk about all of them briefly here:

So, let's try to understand why do we need Redux, though it also makes ur job easy like every other uncomfortable thing in programming does, anyways:

Redux was introduced by Andrew Clark and Dan Abramov, he wanted to solve a problem of state management.

He introduced us a state management library- What is state management?

well if you know how the state management with context api works, then u will know there are times when we get lost in our own code, but here we can store the states in a store.

Yes! a store that takes objects of elements where we define the functionality by creating a slice function and exporting it, all the job inside it is done by the reducers, which makes the job easy and centralized, debugging also gets easier.

But how does all this happen?

Eg:- Here is the code of a basic todo list

We start by creating an initial state, nothing just put a container in it, next:-

1. We create a slice function , which is a part of a redux toolkit, it provides us with action creators and reducers with the redux configuration.

2. It takes name and an initial state, then just add a few functionalities we want to work with like add, delete edit.

3. but that's not it, For creating the functionality we use reducers which is a collection of key and value pair.

4. the key is functionName its value is work.

5. we use state and action for the function parameters and creation

6. state:- Used for accessing the values and action:- the values that we work with.

7. Eg: we are using state.action.payload for our tasks default value and then we push it in the todos with the help of state, which shows how clearly the works!

8. In a similar way we can create other functions, but wait what does that action.playload do?

9. Yeah, it's quite interesting:- playload holds the data or details needed for state updates

10. and here we are done.

11. But how do we export it ?

12. in 2 parts: one where our individual reducers go and the second where we export the converted version of the slice to a reducer (list of reducers).

13. Because reducers and its functionality(for Components) couldn't in one go, we need to pass every slice we create.

And there we exported every slice individually 😱 happily ever after.

Now how do we inject this in components and what is Useselector and Usedispatch ?, (Sabar)

useDispatch()

1. 

useDispatch() a function which give us access to the Reducers, which we can use in our components. eg: In the above code we stored the useDispatch function in a variable and then we can use it for importing our function.

Inside our dispatch we directly passed our input val from usestate in our function.

Working of Useselector()

Breakdown-

1. Helps us to access the functions and extract the data from the Redux store.

2. In the parameters we pass a CB which give us a state, which helps us access the data directly.

3. It defines which part of the reducer you want to define and use in your components.

4. The above code is of update and delete function in a Todo list app, where I utilized useSelector and Usedispatch for creating them.

Furthermore.

Will even explain the concept of routers like how they are helpful and we can create full stack apps using react and appwrite.