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?

[phryneas]

The problem here is that you reference the finished slice within it's definition, so essentially the types reference themselves before they can be calculated.
That can work in simple situations in TS, but it has this limits.

If you stop calling theSliceThatIsYetToBeCreated.getSelectors() in there it will work.

[michalvadak]

@phryneas That works, thanks!

However, I've found another issue. In the last link you sent, there is a selectGameItem that, instead of returning the types passed to the factory, returns the type that it should extend. So, instead of

{
  index: number
  item: ApiItem
  animationState: 'hidden' | 'shown'
}

it's returning

{
  index: number
  item: object | null
  animationState: string
}

Am I doing something wrong?

[phryneas]

Worst case you'll have to manually annotate the selector:

      selectGameItem: (state, index: number): TState['gameItems'][number]|null => {
        const item = selectGameItems(state)
          .find((item) => item.index === index)

        if (!item) return null

        return item
      },

[EskiMojo14]

yeah, typescript inference only goes so far with generics - sometimes it'll just give up and start using the constraint instead

[michalvadak]

That came to my mind just before I went to bed. Thank goodness there's a way to work around that! I've got a fairly complicated slice factory.

Thank you both!