How to use the createStructuredSelector function from reselect

reselect.createStructuredSelector is a function that creates a selector that returns an object with keys mapped to other selectors.

How does reselect.createStructuredSelector work?

reselect.createStructuredSelector is a function in the reselect library that creates a selector function that returns an object of values, where each value is a result of a corresponding input selector function. It allows creating more efficient and flexible selectors for managing derived data in a Redux store. The function takes an object of input selectors and returns a new function that accepts the entire Redux store state and returns an object of selected values. The selected values are the results of the input selectors executed with the store state. The returned function is memoized and only recomputes the selected values if the inputs selectors' outputs change.

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createStructuredSelector } from "reselect";

const selectCartItems = (state) => state.cart.items;
const selectUser = (state) => state.user;

const selectCartAndUser = createStructuredSelector({
  cartItems: selectCartItems,
  currentUser: selectUser,
});

// usage
const mapStateToProps = createStructuredSelector({
  cartItems: selectCartItems,
  currentUser: selectUser,
});

export default connect(mapStateToProps)(Component);

In this example, createStructuredSelector is used to create a selector function that returns an object containing the cart items and current user data from the Redux store. The selectCartItems and selectUser selectors are defined separately, and then passed as arguments to createStructuredSelector along with the keys that should be used for the output object. The resulting selector function can then be used in a mapStateToProps function to easily access the selected data for use in a React component.