Type problem with wrapped createSlice

[medihack]

I am working on a generic undo/redo feature, but having one typing problem remaining that I somehow can't figure out myself. Maybe someone else can have a look, but I am fully aware that this is quite a nontrivial question :-(

Here is my generic slice that wraps createSlice:

import {
  CaseReducer,
  createSlice,
  Draft,
  original,
  PayloadAction,
  SliceCaseReducers,
  ValidateSliceCaseReducers,
} from "@reduxjs/toolkit"
import { applyPatches, castDraft, Patch, produce, produceWithPatches } from "immer"

type PatchesState = { undo: Patch[]; redo: Patch[] }

export type HistoryState<T> = {
  past: PatchesState[]
  present: T
  future: PatchesState[]
}

export const withHistory = <S, P>(reducerFn: CaseReducer<S, PayloadAction<P>>) => ({
  reducer(
    draftState: Draft<HistoryState<S>>,
    action: PayloadAction<P, string, { undoable?: boolean }>
  ) {
    const { undoable } = action.meta
    if (!undoable) {
      const result = reducerFn(draftState.present, action)
      if (result !== undefined) draftState.present = result as Draft<S>
      return undefined
    }

    const state = original(draftState) as HistoryState<S>
    const [nextState, redoPatch, undoPatch] = castDraft(
      produceWithPatches<HistoryState<S>, Draft<HistoryState<S>>>(state, (draft) => {
        const result = reducerFn(draft.present, action)
        if (result !== undefined) draft.present = result as Draft<S>
      })
    )

    return produce(nextState, (draft) => {
      draft.past.push({
        undo: undoPatch,
        redo: redoPatch,
      })
      draft.future = []
    })
  },
  prepare(payload: P, options?: { undoable: boolean }) {
    const undoable = options?.undoable ?? true
    return { payload, meta: { undoable } }
  },
})

export const createHistorySlice = <T, Reducers extends SliceCaseReducers<HistoryState<T>>>({
  name,
  initialState,
  reducers,
}: {
  name: string
  initialState: T
  reducers: ValidateSliceCaseReducers<HistoryState<T>, Reducers>
}) => {
  const historyInitialState: HistoryState<T> = {
    past: [],
    present: initialState,
    future: [],
  }

  return createSlice({
    name,
    initialState: historyInitialState,
    reducers: {
      undo(state) {
        const historyEntry = state.past.pop()
        if (historyEntry) {
          applyPatches(state, historyEntry.undo)
          state.future.unshift(historyEntry)
        }
      },
      redo(state) {
        const historyEntry = state.future.shift()
        if (historyEntry) {
          applyPatches(state, historyEntry.redo)
          state.past.push(historyEntry)
        }
      },
      ...reducers,
    },
  })
}

The problem is that when I use it like this:

import { createHistorySlice, withHistory } from "./historySlice"

type DataState = { [key: string]: any }

export const dataSlice = createHistorySlice({
  name: "data",
  initialState: {},
  reducers: {
    resetData() {
      return {
        past: [],
        present: {},
        future: [],
      }
    },
    changeValue: withHistory<DataState, { fieldId: string; value: any }>((state, action) => {
      const { fieldId, value } = action.payload
      state[fieldId] = value
    }),
  },
})

export const { resetData, changeValue } = dataSlice.actions

export default dataSlice.reducer

I get an type error when using the action:

changeValue({ fieldId: "foo", value: 1 })

Argument of type '{ fieldId: string; value: number; }' is not assignable to parameter of type 'never'.ts(2345)

Somehow the arguments of changeValue could not be inferred correctly:

const changeValue: ActionCreatorWithPreparedPayload
(...args: never[]) => PayloadAction<{
    fieldId: string;
    value: any;
}, `${string}/changeValue`, {
    undoable?: boolean | undefined;
}, never>

The strange thing is that when I comment out the undo and redo reducer in the createHistorySlice, then those arguments are inferred correctly, and no type errors occur.

[medihack]

If anyone is interested or wants to implement some undo/redo functionality, here is how I finally handled it. I stopped fiddling around with the reducers and just wrote a produceWithHistory helper. I guess that is the even more transparent way.

import {
  createSlice,
  Draft,
  original,
  SliceCaseReducers,
  ValidateSliceCaseReducers,
} from "@reduxjs/toolkit"
import { applyPatches, castDraft, isDraft, Patch, produce, produceWithPatches } from "immer"

type PatchesState = { undo: Patch[]; redo: Patch[] }

export type HistoryState<T> = {
  past: PatchesState[]
  present: T
  future: PatchesState[]
}

export const produceWithHistory = <S>(
  draftState: Draft<HistoryState<S>> | HistoryState<S>,
  recipe: (draft: Draft<S>) => Draft<S> | void,
  options?: { undoable: boolean }
) => {
  const state = (isDraft(draftState) ? original(draftState) : draftState) as HistoryState<S>

  const [nextState, redoPatch, undoPatch] = castDraft(
    produceWithPatches<HistoryState<S>, Draft<HistoryState<S>>>(state, (draft) => {
      const result = recipe(draft.present)
      if (result !== undefined) draft.present = result
    })
  )

  const undoable = options?.undoable ?? true
  if (undoable) {
    produce(nextState, (draft) => {
      draft.past.push({
        undo: undoPatch,
        redo: redoPatch,
      })
      draft.future = []
    })
  }
}

export const createHistorySlice = <T, Reducers extends SliceCaseReducers<HistoryState<T>>>({
  name,
  initialState,
  reducers,
}: {
  name: string
  initialState: HistoryState<T>
  reducers: ValidateSliceCaseReducers<HistoryState<T>, Reducers>
}) =>
  createSlice({
    name,
    initialState,
    reducers: {
      undo(state) {
        const historyEntry = state.past.pop()
        if (historyEntry) {
          applyPatches(state, historyEntry.undo)
          state.future.unshift(historyEntry)
        }
      },
      redo(state) {
        const historyEntry = state.future.shift()
        if (historyEntry) {
          applyPatches(state, historyEntry.redo)
          state.past.push(historyEntry)
        }
      },
      ...reducers,
    },
  })

And how I use it ...

import { PayloadAction } from "@reduxjs/toolkit"
import { HistoryState, createHistorySlice, produceWithHistory } from "./historySlice"

type DataState = { [key: string]: any }

const initialState: HistoryState<DataState> = {
  past: [],
  present: {},
  future: [],
}

export const dataSlice = createHistorySlice({
  name: "data",
  initialState,
  reducers: {
    resetData() {
      return {
        past: [],
        present: {},
        future: [],
      }
    },
    changeValue(state, action: PayloadAction<{ fieldId: string; value: any }>) {
      const { fieldId, value } = action.payload
      produceWithHistory(state, (draft) => {
        draft[fieldId] = value
      })
    },
  },
})

export const { undo, redo, resetData, changeValue } = dataSlice.actions

changeValue({ fieldId: "foo", value: 1 })

export default dataSlice.reducer

[EskiMojo14]

Thanks for raising the issue regarding the regression with wrapping createSlice! Admittedly I've never been particularly keen on the approach as the typing for createSlice is pretty fragile (as demonstrated by this regression).

As an alternative, have you considered an "adapter" approach like we've done for createEntityAdapter? See this codesandbox for a proper demo.

We're also investigating "custom slice creators" which would have the capability of creating multiple reducers in one go.

[medihack]

@EskiMojo14 Thanks for sharing. The adapter approach looks interesting and I think I'll give it a try. For my use case, it will fit quite well. But I am also looking forward to custom slice creators as those would IMHO better fit third-party extensions (using the adapter looks a bit verbose to me).

[medihack]

@EskiMojo14 This is some excellent and advanced stuff. One thing I miss a bit is a slightly better initial explanation of buildCreateSlice. The function appears somewhat suddenly in the sample code without a brief prior explanation. Later on, there are more details about it, but a little bit scattered under some other titles (create.asyncThunk, create and Further examples). Some initial introduction would have helped me a bit better to understand the concept. Otherwise, I quite like the explanations and examples.

[EskiMojo14]

that's a great point, thanks!

[EskiMojo14]

@medihack I've added a dedicated (if short) section regarding buildCreateSlice which is now linked to from the create.asyncThunk note, as well as a more explicit example of its usage in creator definitions.

Do you reckon this covers it, or do you think anything extra could help?

[medihack]

@EskiMojo14 Yes, I think it's better. But still, as a new user, I would have some problems following the "storyline" here. The reducers "creator callback" notation is an subitem of Parameters and already uses buildCreateSlice in its example. The item buildCreateSlice is just somewhere in between, and the directly following Example paragraph doesn't use buildCreateSlice at all. Wouldn't it be much easier to put everything with creator callback and buildCreateSlice under "Custom creators" and build up the whole concept there? Just an idea.

[EskiMojo14]

i'll give it a think - my concern is that i don't want to bury create.asyncThunk too much as I believe it'll be widely useful.