What is Redux?
Redux is a state management library for JavaScript applications. If we want to share state data from one component to another, we need passes from parent component to child component in the form of props. Using Redux we don't need props drilling to share data from one component to another because Redux is considered as a central store. Context APIs solve similar problems as Redux in this age, but Redux is better option for large scale applications where we need handle many state.
Image Source: codecentric
Three Core Principle of Redux
1. Store: It provides a universal data storage. We can create Redux store using createStore(). We must pass reducer as its first parameter. It takes an optional second parameter as 'initialState' and an optional 'middleware' which allows us to pass multiple middlewares like 'thunk', 'redux-logger', etc.
2. Actions: Actions are kind of events and they are just objects. When an event is trigged inside the application, then an action created which give instructions to update the state.
3. Reducers: When the action is dispatched and sent to the store, then the store holds the application state and updates the state by using the reducer function.
Finally, Update states are sent to UI.
Benefits of Redux
- Predictable state changes
- Centralized state
- Easy debugging
- Preserve page state
- Implement Undo/Redo features
- Large & growing Ecosystem of add-ons
Disadvantages of Redux
- Complexity
- Need to write some boiler plate code to get things done
When not to use Redux
- Tight budget
- Small to medium size applications
- Simple UI/data flow
- Static data
Top comments (0)