Complete React Redux Tutorial in Hindi | React Redux in 2022

Complete React Redux Tutorial in Hindi | React Redux in 2022 #reactredux #redux #reduxhindi For Queries contact: https://www.instagram.com/abdurehman1993/ When it comes to learning front-end development, few tools cause more headaches than Redux. It’s become a standard technology in the repertoire of many React developers, but it’s arguably one of the trickiest parts. In case you need convincing, I collected several comments from people venting about their struggle to understand Redux on YouTube: “I have thrown Redux in the dustbin as I can’t get my head around it.” “This Redux stuff is too complex to understand and it’s still worse to remember all this.” “Setting up Redux is one of the most disgusting things I have come across during my front end development journey… this really could be the ugliest part of the entire process.” Fear not! It may seem fiddly at first but, like most tricky parts of web development, Redux gets a lot easier with practice. I think one mistake that a lot of tutorials make is getting into the code too quickly before actually explaining the underlying concept. So, in this article, we’ll start by looking at what Redux is, the way it works, and common Redux file structures before actually jumping into some code and building a simple counter app. I also think a lot of developers who want to learn Redux come to it knowing React, and they assume that — because they understand React’s state system — they’ll pick up Redux very quickly. While this may be the case for some, for most learners Redux may take some time to figure out. Be prepared to give it a bit of thought! What is Redux? Redux is a state container for JavaScript apps. It is most commonly paired with React, where it takes control of state away from React components and gives it to a centralised place called a ‘store’. Consider the following diagram: The left diagram represents a regular React app without Redux. Each circle represents a component. When a component initiates a change (the blue circle), this change is communicated to the other components one step at a time. This may seem simple enough when we only have 10 components, but what about an app with 20, 50 or 100 components? As an app becomes larger, debugging can quickly become tricky, as we lose sight of how information is passed from one component to another. On the right is the same React app with Redux. This time, when a component initiates a change, that information goes straight from it (the blue circle) to our store (the green circle). From there, the change is then communicated directly to all the components that need to update. Redux, therefore, makes it much easier to diagnose problems: a problem will either be in the component that initiated the change (the blue circle) or in the code related to Redux itself. Redux Flow Before jumping into the code, it’s useful to think about how Redux is working conceptually. The diagram below demonstrates the essential steps to Redux’s process: Step 1: UI (User Interface) This is where a change is triggered. For example, a user clicking a ‘+’ button in a simple counter app. Step 2: Actions The actual action we want to take place, for example, “add one”. In Redux, actions are plain JavaScript objects, and they must have a type property (e.g. 'ADD_ONE' ). Step 3: Reducer These specify how the application’s state should change in response to each action. For example, our new state should be one integer higher than our old state. (It is reducers which give Redux its name — they share the same Latin root). Step 4A: Store The store brings everything together. It holds application state, and it is where you will find three critical methods: getState() — which allows access to the state object dispatch(action) — which allows state to be updated subscribe(listener) — which registers listeners, allowing code to trigger every time a change takes place Step 4B: State Finally, state is contained within the store. It is a concept you should be familiar with from React. In short, it is an object that represents the dynamic parts of the app: anything that may change on the client-side. In our example of a counter app, the state object will contain whatever number our counter is on. This change is then communicated back to the UI, where it will appear to the user. Additional Jargon There are also a few more terms you’re likely to encounter when using Redux: