What is Store? 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.
What is Prop-Drilling? Why should we avoid it? While working with large enterprise applications, suppose, we have a parent component with 'n' hierarchical child components and we want to use a parent state/prop object in the farthest child, we need to pass it 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 tree, we need to modify the import of all subsequent child component below in order to adjust the props. This is quite tiresome and prone to errors.
What is Redux? Redux is an open-source JavaScript library for managing application state. It is most commonly used with the view libraries such as React or Angular for building user interfaces. In Redux, we have a single store, which in contrast to FLUX (store developed by Facebook having multiple stores).
What are the building blocks of the Redux store? Redux store revolves around the following terminologies - Actions, Action-creators, Store, Reducers, Selectors. In order to know in details, click here
How does a reducer work? The logic inside a reducer follow the following series of steps:
Whenever there is any event on the screen, 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.
Otherwise, return the existing state unchanged.
This is mostly done using if-else/switch block
Explain Redux data flow The data flow in redux is unidirectional. Below are the steps of data flow in redux:
An action is dispatched when a user does any activity in the application.
The root reducer is called with the current state and the dispatched action. The root reducer may be a combination of smaller multiple reducers to divide the task.
Inside the specific reducer the state is manipulated as per the action.
The store notifies the view by executing their callback functions.
The view can retrieve updated state and re-render again.
What is Provider? Provider is a JS component that comes with react-redux package. It provides the store to the entire React application. This is done by rendering a <Provider> at the top level(index.js), with the entire app’s component tree inside it. For more details, click here.
What is connect? Connect is a function that comes with the react-redux dependency. This function is used to connect the Redux store to the react components. NOTE: Even if the component is connected, if we don’t wrap it under the <Provide/>, store won’t be available to it. Connect() function can be thought of a HOC–>Higher-Order-Component.
What are the possible arguments in a connect() function? The parameters which connect() function accepts as arguments are:
mapStateToProps
mapDispatchToProps
mergeProps
options
For details, click here.
What are mapStateToProps and mapDispatchToProps? These are two of the arguments provided to the connect function. Detailed information provided here.
What is dispatch?
dispatch () is the method used to dispatch actions and trigger state changes to the store. We can invoke dispatch by calling it directly from store. But React-Redux provides a simpler way to do that by providing the mapDispatchToProps inside the connect function.
What are the ways to dispatch actions with Redux? Below are the various ways to dispatch actions with Redux:
By importing store from Redux and then using store.dispatch in the component.
By using mapStateToProps.
By using bindActionCreators.
For more details, click here.
What is middleware in Redux? Redux middleware can be thought of more like a server side middleware, that holds a certain activity till the required task is completed. It acts like a third party extension point between dispatching an action, and calling the reducer to update the store.
What is React hook? Prior to React 16.8, state can be associated with class components only. From 16.8, react hooks were introduced, that allow us to use state functionality in the functional components as well and interact with the store.
Explain some of the important react Hooks Below are some of the mostly used react hooks:
Comentarios