FIFTH POST: Redux
Here is a demonstration of component hierarchy of a movie app. It has 5 components. If we put states(data) related to movies inside Movie List component, We can access it only inside Movie component using props since react allows only data flow from top to bottom. We can access state anywhere if we put it on App component. It call as Lifting up the state, But there is no sense putting state of movies in App component. We can solve this problem using Redux. It allows us to put states separately and access them inside components what we need.
So we can call Redux as a state managing library(Manage the data of the app), that use with javascript applications. This is very popular to use with React.js. Also we can use Redux with Angular.js, Vue.js or vanilla javascript etc.. The main items in Redux vocabulary is,
- Store
- Action
- Reducer
- Dispatch
- Subscribe
- Provider
- Connect
Store – An object that hold the state tree of the application
Action – JavaScript objects. Must have a property to indicate the type of action it carrying. They must also have a payload with the information that should be worked on by the action. Actions sent using store.dispatch() method
Reducer – Functions that take the previous state of the app and return a new state based on the action passed to it
Dispatch – A method triggers an action with type and payload to Reducer. Use as store.dispatch()
Subscribe – A method used to subscribe data/state from the Store. Use as store.subscribe()
Provider – A component that has a reference to Store and provides data from the Store to the component it wraps.
Connect – A function that communicates with the Provider.
- How Redux Work.
- When an event triggers (OnClick, OnChange etc), it can dispatch Actions based on that event.
- Reducers process Actions and return a new state as an Object.
- New state of the whole application goes into a single Store.
- Components can easily subscribe to Store.
- Advantages of Redux.
- Makes the state predictable.
- Easy to Maintain.
- Avoid uplift the state in React.
- Easy to Debug.
- Link.
-Prabath Shalitha (2020 Mar 7)
Shalitha's Technical Blog 