Introduction A store is basically just a plain JavaScript object that allows components to share a common state. In a way, we can think of a store as a database. It is mostly useful when we have a large enterprise application and need to share our state among large number of components. In React, stores are application-level singletons, which means, there won’t be multiple instances of the same store. Typically this means exporting an individual store object and globally exposing it to all component’s that require it.
Why Store ? PropDrilling: While working with large enterprise applications, suppose, we have a parent component with n hierarchical child components and a state object, and the props are passed down from one component to another. This situation is known as Prop-Drilling. If we want to add another child component somewhere in the mid of the component tree, we need to modify the import of all subsequent child component below in order to adjust the props. With store, we have a common state and the new component can access it anytime. Lifting State Up: Considering the above example, suppose a child A has an OnClick event and the outcome of the event should be visible in child B. For this we need to lift the sate up from Class A to the parent component and then pass it to Class B. Any change in the tree structure, would disrupt the flow. With store, we can dispatch an action on the OnClick event and update the store. the same store can be accessed in child B and handled accordingly, even though there is a change in the hierarchical structure. Other than this, there are a few more advantages of the Store. These are listed below. Easier to debug: Having a single store for holding the state makes it easier to debug in case of any change. Predictable outcome: Passing a state having a particular value and a particular action, the outcome would always be same. Common terminologies while interacting with store Actions: An action is a plain JavaScript object that has a type field. It is an event that describes something that happened in the application, example, onClick(). An action object can have other fields with additional information. We put that information in a field called payload. Action Creators: An action creator is a function that creates and returns an action object. In the below snippet, the return object is the action and the function decrement_age is the action creator. I prefer to use action creator and call the action creator on the event, instead of the action.
Reducers: A reducer is a function that receives the current state and an action object, decides how to update the state, if necessary, and returns the new updated state. The logic inside reducer functions follow the following series of steps: 1. Whenever there is an event, a particular action is called. The reducer checks the type attribute of this action. If valid, makes a copy of the state, updates the copy with new values, and return it. 2. Otherwise, return the existing state unchanged 3. This is mostly done using if-else/switch block Below is a simple reducer function snippet. Note: Never mutate the state directly in reducer. Make a copy and then mutate the state.
Store: The current application state lives in an object called the store. The store is created by passing in a reducer const store = createStore(Reducer), and has a method called getState that returns the current state value. We can access it by writing store.getState(). Dispatch: The store has a method called dispatch. The only way to update the state is to call dispatch() and pass in an action object or the action creator function. In terms of store, it is seen as an event trigger, for the reducer to understand that some action has been performed. Below is a snippet, that shows, decrement is an event, that calls the action creator decrement_age.
Selectors: Selectors are functions that know how to extract specific pieces of information from the store. As an application grows bigger, this can help avoid repeating logic. We will discuss about this in details later, in subsequent blogs. Summary In this blog, we have discussed about the react Store, why is is required and the different elements in the store. In subsequent blogs, we will discuss how to accept the updated state in the store in our components.
Code repo => https://github.com/Titashr/my_react_app.git
Comments