Quick Flow of Redux
Let’s start off by talking about what Redux is. Redux is basically a state management tool that stores all of our state in one location. It allows any component to connect to the redux store to get the state it needs and the functionality needed in terms of making changes(dispatch()). Overall, redux has made many react applications much easier when it came to state management.
Now let’s talk about the flow of redux!
In order for your react application to have access to the store, it must be wrapped inside of the <Provider> which would be located in the index.js file as shown below.
When a component triggers an action which is a description for a state change and very much similar to events like the click event, hover etc., redux would then dispatch that action. Dispatch() is a function that is provided by redux.
Basically, sending the “type” of action over to our reducers. Reducers are pure functions with a switch statement that returns a new state based on the action type sent.
From there, the reducers will be taking our current state and the dispatcher “type” to make the changes and updates to the state. Once that change happens in the store, this would then cause a re-render in the components that rely on the piece of state that changed. Anything that changes, would also be updated onto the screen as well.
Overall, redux helps to maintain the state changes in our react applications and minimizes a decent amount of unnecessary re-renders. I’ve also linked down below a site that goes into more details about the fundamentals of redux.