Flow of Redux state management
- State Initialization: Initially define an initial state for the application. The would include different states like user authentication state, data fetched from APIs or UI related content state.
- Dispatching Actions: When something happens in the application built, like user clicking a button or the data received from an API, at that point of time we dispatch an action. An action is a plain JavaScript object that describes about what happened, it must have a ‘type’ property which indicates the type of the action getting performed.
- Reducers Processing Actions: Actions are then sent to reducers. Reducers are pure functions that take the current state and the action to be performed as an input and return the new state based on that action. Reducers basically specifies how the state should change based on different actions.
- State Update: The Redux store then calls the root reducer, passing the current state and the action. The root reducer then redirects to the individual reducer that is responsible for handling the state. Each reducer then returns a new slice of state which is later combined into a single updated state object.
- State Subscription: Components of the application can also subscribe to the Redux store i.e. when the state changes then redux notifies the corresponding components for re-rendering in order to reflect the updated state in the UI.
- Optional Middleware: Redux also has an option to apply middleware layer, which are functions that intercept actions before they reach reducers. Middleware can be used for different uses according to one’s need like logging or routing.
Why we need Redux in React ?
Redux is a library used in JavaScript applications for managing application states. It is particularly used and more popular in terms of building single-page applications using frameworks like React.
Redux can also be used with other frameworks or libraries as well. It serves as a centralized store that is used for state management in an application, making it easier to manage state across the entire application and it enables us to predict behavior through a set of rules.
Table of Content
- Why we need Redux in React ?
- Why Redux is used for state management?
- Flow of Redux state management
- Example of Redux store in React
Contact Us