Understanding createSlice + selectors + memoization Current State

[jd-carroll]

Note: I tried to follow the conversation in #3387 as well as the documentation on createSlice, createSelector, and Deriving Data with Selectors. It is very likely the answer is spelled out for me somewhere in all of those, but I am having a hard time distilling everything into the correct approach. So here we are and thank you in advance...

Context:

I have a slice which maintains entitlement data:

export interface ResolvedEntitlements {
  [boundary: string]: ResolvedBoundaryEntitlements;
}

export interface AuthenticationState {
  entitlements?: { [boundary: string]: { [scope: string]: ResolvedBoundaryEntitlements } };
}

const initialState: AuthenticationState = { };

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    ...
  }
});

The way we manage entitlement data is not perfect. Without getting into a detailed discussion on how we manage entitlements, there are top level boundaries (eg. user or organization) and sub-system "scopes". We do not have a singular representation of entitlements in a database somewhere. Instead, sub-systems manage their own so we end up with a map of maps data structure.

What I would like:

The entitlement data is global to the application, so I would like to write a selector which merges all of the partials into a singular map. The selector I have looks something like:

export const authSlice = createSlice({
  ...
  selectors: {
    SelectEntitlements: (state: AuthenticationState): ResolvedEntitlements => {
      const entitlements = state.entitlements;
      if (!entitlements) {
        return {};
      }

      const resolved: ResolvedEntitlements = {};
      Object.keys(entitlements).forEach((boundary) => {
        const scopedEntitlements = entitlements[boundary];
        Object.values(scopedEntitlements).forEach((scoped) => {
          resolved[boundary] = mergeResolvedBoundaryEntitlements(resolved[boundary], scoped);
        });
      });

      return resolved;
    }
  }
});

My understanding is that every time I reference authSlice.selectors it will "instantiate" (?) a new selectors object and pass the current slice state as the first parameter.

Further, I do not need component specific selector functions. The entitlement state is global so it should always be the same across the application unless the underlying state has changed. (Note: I understand that because the selectors object is "instantiated" every time I reference authSlice.selectors that the resulting objects will have equivalent values but have different object references)

The issue:

Selector wrapper returned a different result when called with the same parameters. This can lead to unnecessary rerenders.
Selectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization {
  state: {
    ...

Which, to be clear, is obvious, the selector function is returning a new object reference every time.

Questions

1. How do I memoize the selector result? I thought that there was already some "auto-magic" that happened behind the scenes where the state is memoized and because that is memoized it does not need to re-run the selector logic (even on successive authSlice.selectors references)
2. Is this a limitation of the built in selectors for slices? I get the feeling that I need to "eject" from the built-in selector functionality of the slice and go directly for createSelector or maybe even proxy-memoize. But even still, the memoization story seems a little unclear.
3. Is my thinking that this could be globally memoized mistaken? I'm ending up in space where I think my conception that this could be globally memoized (across all components) is mistaken. I'm starting to feel as though component level memoization is both desired and the only achievable outcome.

[EskiMojo14]

Hi there!

My understanding is that every time I reference authSlice.selectors it will "instantiate" (?) a new selectors object and pass the current slice state as the first parameter.

This is not the case - the first time .selectors is referenced, it'll make a wrapped version of the selectors object. Every time after that it'll return the same cached object. The same goes for getSelectors(selectSlice) - if the same selectSlice callback is passed, it'll return the same object.

How do I memoize the selector result? I thought that there was already some "auto-magic" that happened behind the scenes where the state is memoized and because that is memoized it does not need to re-run the selector logic (even on successive authSlice.selectors references)

There's no "auto-magic" with the wrapped selectors. They're essentially as simple as (rootState, ...args) => selector(selectSlice(rootState), ...args). if you need memoization, it should be included in the selector you pass to .selectors.

In this case, it seems like you'd want something like the below:

export const authSlice = createSlice({
  ...
  selectors: {
    selectEntitlements: createSelector(
      (state: AuthenticationState) => state.entitlements,
      (entitlements): ResolvedEntitlements => {
        const entitlements = state.entitlements;
        if (!entitlements) {
          return {};
        }

        const resolved: ResolvedEntitlements = {};
        Object.keys(entitlements).forEach((boundary) => {
          const scopedEntitlements = entitlements[boundary];
          Object.values(scopedEntitlements).forEach((scoped) => {
            resolved[boundary] = mergeResolvedBoundaryEntitlements(resolved[boundary], scoped);
          });
        });
  
        return resolved;
      }
    ),
  }
});

This would make it so that your result is only recalculated when sliceState.entitlements changes.

[jd-carroll]

Apparently I have no manners... Thank you!

That was exactly the solution, as feared it was right in front of my face. ❤️