Slice factory / Extendable slice

[michalvadak]

Hey! Is there a way to create a Slice Factory or something similar that would allow me to create a Slice with a "basic" state, reducers, and selectors, and then use it in multiple stores, each with something extra?

[markerikson]

Yeah, it's always been possible to write higher order reducers:

• https://redux.js.org/usage/structuring-reducers/reusing-reducer-logic
• https://redux-toolkit.js.org/usage/usage-with-typescript#wrapping-createslice

What do you mean by "with something extra", specifically?

[michalvadak]

The second link is exactly what I was looking for. For some reason, I could not find it. Thanks! If I'm not mistaken, the wrapped createSlice does not have an example with selectors. Is that not possible?

By "with something extra", I meant an additional state, reducer, or selector.

[markerikson]

For some reason, I could not find it

Admittedly "buried on the TS usage page" is a pretty obscure place to have this, but that's because the only tricky bit about doing that wrapping is the TS part, so that's where we have the one example of it.

the wrapped createSlice does not have an example with selectors. Is that not possible?

Why wouldn't returning selectors be possible? :)

We can't write examples that cover every single hypothetical scenario and usage of our library. We can provide some examples that cover things we've thought of or that we think users are likely to try, but in a lot of cases it's "here's an example that's relevant, you go tweak or rework this as needed for your situation".

So sure, if you want your createSlice wrapper function to also create and return some selectors, go right ahead and do that, whether it's separate createSelector calls or adding the selectors field inside of createSlice.

[michalvadak]

Admittedly "buried on the TS usage page" is a pretty obscure place to have this, but that's because the only tricky bit about doing that wrapping is the TS part, so that's where we have the one example of it.

That's understandable. :)

Why wouldn't returning selectors be possible? :)

I've tried adding it to the slice factory like so

export type ConfigState<TConfig> = {
  config: TConfig | null;
};

type CreateConfigSliceOptions<
  T,
  Reducers extends SliceCaseReducers<ConfigState<T>>
> = {
  name: string;
  initialState: ConfigState<T>;
  reducers: ValidateSliceCaseReducers<ConfigState<T>, Reducers>;
  selectors: SliceSelectors<ConfigState<T>>;
};

export const createConfigSlice = <
  T,
  Reducers extends SliceCaseReducers<ConfigState<T>>
>(
  options: CreateConfigSliceOptions<T, Reducers>
) => {
  const { name, initialState, reducers, selectors } = options;

  return createSlice({
    name,
    initialState,
    reducers: {
      setConfig: (state: ConfigState<T>, action: PayloadAction<T>) => {
        state.config = action.payload;
      },
      ...reducers,
    },
    selectors: {
      selectConfig: (state) => state.config,
      ...selectors,
    },
  });
};

as SliceSelectors is the only type I was able to find in the @reduxjs/toolkit regarding the selectors. This doesn't throw any TS error but when I use that selector in useAppSelector like so const config = useAppSelector(selectConfig); I get this error.

[EskiMojo14]

selectors need to be a type parameter too (and chances are you'll want name to be too, if you're using slice.selectors):

type CreateConfigSliceOptions<
  T,
  Name extends string,
  Reducers extends SliceCaseReducers<ConfigState<T>>,
  Selectors extends SliceSelectors<ConfigState<T>>,
> = {
  name: Name;
  initialState: ConfigState<T>;
  reducers: ValidateSliceCaseReducers<ConfigState<T>, Reducers>;
  selectors: Selectors;
};

export const createConfigSlice = <
  T,
  Name extends string,
  Reducers extends SliceCaseReducers<ConfigState<T>>,
  Selectors extends SliceSelectors<ConfigState<T>>,
>(
  options: CreateConfigSliceOptions<T, Name, Reducers, Selectors>,
) => {
  const { name, initialState, reducers, selectors } = options;

  return createSlice({
    name,
    initialState,
    reducers: {
      setConfig: (state: ConfigState<T>, action: PayloadAction<T>) => {
        state.config = action.payload;
      },
      ...reducers,
    },
    selectors: {
      selectConfig: (state) => state.config,
      ...selectors,
    },
  });
};

[michalvadak]

Great, that works! A big thank you to you both!