Advanged Usage

Along with the general guidance there are some additional usages that can be used to further customize the behavior of the library.

Property Selectors

const { counter } = useSelector((state) => ({
  counter: state.counter,
}));

By design it will return any value from the context that matches the object property. In this case the counter property.

Note* It is recommended to use the string based selectors as they are a little less verbose. But it is personal preference. See Common Guide for more details.

Property selectors are also not supported by the eslint or codegen plugins.

const { counter } = useMySelector("counter");

Custom Selectors

In addition to pulling properties directly off the originally state object. You can also use a custom selector to perform functional updates against the state variables.

const { counter, double, counterString } = useSelector((state) => ({
  counter: state.counter,
  double: state.counter * 2,
  counterString: state.counter.toString(),
}));

These manipulations are also type safe returning exactly the object you specify. This flips the story of having to put every manipulation of the state into a state. Now you can do it inline with the component when needed.

This streamlines the process instead of having to create an additional dervived state variable.