An overview of how state is passed to the selector when we use the Connect component from a reduction reaction
What is a selector?
The selector retrieves a subset of the data from the source.
Let's think of the Redux store as our foreground database. For this purpose, in the database, if you want to extract a subset of all the data, you execute a query. Similarly, selectors are our requests to the Redux store.
In the simplest case, the selector can simply return the state of the entire storage.
Re-fetching documents gives us three great reasons to use selectors.
- Selectors can compute derived data, allowing Redux to maintain the lowest possible state.
- Selectors are effective. The selector is not recounted if one of its arguments does not change.
- Selectors are composable. They can be used as input for other selectors.
What is a higher order component?
A higher-order component is a function that takes an existing component and returns a new component.
A join is a higher order component to which a selector is assigned.
Taken from this brilliant meaning, which gives a good explanation of the connection.
connect () is a function that injects Redux-related requisitions into your component.
A connection is a higher order component that helps our React component learn about the Redux store. When we call the connection, we can pass mapStateToProps and mapDispatchToProps. These features determine how our new component connects to the redux repository.
We can give it access to the state by passing the mapStateToProps function as an argument.
We can also bind action creators to store.dispatch through mapDispatchToProps. The advantage of this is that we do not need to transfer the entire store in order for the component to have access to store.dispatch so that the component can send its own Redux actions.
The mapStateToProps function that we pass to Connect is a selector
From the reaction-reduction documents
The mapStateToProps function takes one argument; all Redux saves the state and returns the object that should be passed as the attribute. This is often called a selector.
Think about the object that mapStateToProps returns as a result of our request to the Redux repository. The result
The mapStateToProps function should usually return a simple object.
The result of calling mapStateToProps will usually be a simple object representing the data we retrieved from the redux repository.
A higher order Connect component allows us to extend the functionality of an existing component by combining data from this new object with the existing component attribute.
Since selectors are just functions, we can connect them to the Redux repository using the connect component.
However, in some cases, we can return the function. Why do we have to do this?
By storing the function in mapStateToProps, we can capture the component rendering cycle and optimize performance
In advanced scripts, where you need more control over performance rendering, mapStateToProps () can also return a function. In this case, this function will be used as mapStateToProps () for a specific component instance. This allows you to make memoranda for each instance.
By passing the mapStateToProps function as an argument to our higher-order component, our connected component will be updated at any time when some state has changed in the Redux repository.
If these updates happen very often or the state tree is large, then the re-selection library is useful because it allows us to use memoized selectors.
This fantastic word means that the results of the selector calls are saved if they need to be received again.
So, if mapStatesToProps returned a simple object instead of a function, then whenever the state of the repository changed, we would have new details for our component.
Connecting selectors to the repository
If you use React Redux, you can call the selectors like normal functions inside mapStateToProps ():
import { getVisibleTodos } from '../selectors' const mapStateToProps = (state) => { return { todos: getVisibleTodos(state) } }
Shared Selectors for Multiple Components
We can provide selector selector resets similar to components when using the reselect library. This allows us to share selectors across several components.
Let's say we have several toDo lists, each of which has its own identifier. We will still use the same getVisibleTodos selector for each instance of the toDo list, but just pass a different identifier as a support.
However, the problem is that createSelector only returns the cached value when its argument set matches its previous argument set.
Re-select documents indicating that we can overcome this limitation by returning a function inside mapStateToProps:
To split the selector among several components and preserve memoization, each instance of the component needs its own copy of the selector. If the mapStateToProps argument provided for the connection returns a function instead of an object, it will be used to create a separate mapStateToProps function for each container instance.
By returning a function inside mapStateToProps, we can overcome this limitation, and memoization will work correctly.
For a more detailed explanation see this