That was a lot to go over in very little words, so don’t feel intimidated if you’re still not entirely sure how all the pieces fit together. Redux offers a very powerful pattern for managing application state, so it’s only natural that it takes a little practice to get used to the concepts. So lets say a user clicks on a button, we then call an action creator which is a function that returns an action. That action has a type that describes the type of action that was just triggered. Actions are plain JavaScript objects that represent payloads of information that send data from your application to your store. Reducers specify how the application’s state changes in response to actions that are dispatched to the store.
When an update in component state occurs, this information needs to be passed to other linked components or subcomponents so that they can behave as required. Imagine your web application has a dark mode feature – all other components in the user interface (UI) must know when the dark mode is enabled so that they are rendered in the right color. In Array.reduce() we returned the sum of the accumulator and current value. If you take the example of our bank scenario then after withdrawal, the money in your bank vault is no longer the same. It will be updated and again, the Cashier and Vault will remain in sync with the balance left in your account. Just like the cashier the reducer always returns the new state of your application.
While this is a fairly efficient pattern that promotes pure functions, for simple applications that only involve a few UI changes, this can be an overhead. Most importantly, we shouldn’t forget that Redux is an in-memory state store. In other words, if our application crashes, we lose the entire application state. This means we have to use a caching solution to create what is redux for a backup of the application state, which in turn creates additional overhead. Once your project is set up and you have a decent idea of what you’re doing, developers are able to create stable, snappy and sane applications in a fraction of the time it normally takes. This is especially true when creating single page applications, which have always been a bit of a pain.
Redux manages all this data by keeping it in one single place, called the “store”. Redux can be used in any application requiring complex data flow, such as web apps, mobile apps, and even desktop applications. With it, you can handle the initial render of the app by sending the state of an app to the server along with its response to the server request. The required components are then rendered in HTML and sent to the clients.
With a real-life example, we understood the principles and some common terminologies of Redux but how to introduce all these things in an application? To deepen your fundamental concepts in Redux let’s take an example of a simple React application, and we will refactor the app to introduce Redux in it. You’re aware that there is a process that you need to follow to withdraw your money. When you talk to the cashier, he takes some time, checks some details, enters some commands, and hands over the cash to you.
Also, don’t get afraid of so many libraries available in Redux. Each library has its own specific job that you will understand slowly and gradually. For your action WITHDRAW_MONEY, you interact with the cashier…yeah??? This means if you want your money, your action needs to be passed through the cashier. When you are dispatching an action, it passes through the Reducer (cashier). After splitting our monolith into a Rails API + a React Redux.js frontend app, it became a necessity to monitor frontend errors.
Using connect, you can connect a React component to the Redux store. This allows the component to receive updates to the store’s state as props. This makes it easy to use Redux to manage state for React components.
Portugues 
Italiano 
Français 
Espa├▒ol 
English