Reselect

reselect memoizes ("caches") previous state trees and calculations based upon the said tree. This means repeated changes and calculations are fast and efficient, providing us with a performance boost over standard useSelector implementations.

The official documentation offers a good starting point!

Usage

There are two different kinds of selectors, simple and complex ones.

Simple selectors

Simple selectors are just that: they take the application state and select a part of it.

export const mySelector = (state: MyRootState) => state.someState;

Complex selectors

If we need to, we can combine simple selectors to build more complex ones which get nested state parts with reselect's createSelector function. We import other selectors and pass them to the createSelector call:

.../slice/selectors.ts

import { createSelector } from '@reduxjs/toolkit';

export const mySelector = (state: MyRootState) => state.someState;

// Here type of `someState` will be inferred ✅
const myComplexSelector = createSelector(
  mySelector,
  someState => someState.someNestedState,
);

export { myComplexSelector };

Using your selectors in components

index.tsx

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { selectUsername } from './slice/selectors';

export function HomePage() {
  // Type of the `username` will be inferred  ✅
  const username = useSelector(selectUsername);
  // ...
}

🎉 Good News: You don't need to write this boilerplate code by hand, the slice generator will generate it for you. ✓