Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use generic to type the name of a slice

See original GitHub issue

Specifying a generic type for the property name of a slice would help typescript to deduce the type of objects built from slice.

As a practical example, I would like to put all my action creators inside an object I can then type and pass to Thunk extra arguments, or a react-redux mapDispatchToProps. This looks like this :

const clientSlice = createSlice({name:'clients', reducers: {get: (state) => {}}});
const categorySlice = createSlice({name:'category', reducers: {save: (state) => {}}});
const uiSlice = createSlice({name:'ui', reducers: {goToHome: (state) => {}}});

export const actionCreators = {
   [clientSlice.name]: {...clientSlice.actions},
   [categorySlice.name]: {...categorySlice.actions},
   [uiSlice.name]: {...uiSlice.actions}
}

export type ActionCreators = typeof actionCreators

If name was a generic extending string, I could have autocompletion in code like

const connectMyComponent = (dispatch: Dispatch) : MapDispatchToProp => (actionCreators : ActionCreators) => ({
   getClients: dispatch(actionCreators.clients.get()),
   saveCategory: dispatch(actionCreators.category.save()),
   changePage: dispatch(actionCreators.ui.goToHome())
})

Unfortunately, this won’t work since clientSlice.name is typed string.

There is a workaround you can see below, but integrating a generic type would be quite easy and straightforward (I can do a PR if wanted).

Workaround : It’s possible to wrap the function createSlice like describe here in rtk doc and return an object with a type for the property name :

const createGenericSlice = <
  Name extends string
  T,
  Reducers extends SliceCaseReducers<T>
>({
  name = "",
  initialState,
  reducers
}: {
  name: Name
  initialState: T
  reducers: ValidateSliceCaseReducers<T, Reducers>
}) => {
  const slice = createSlice({
    name,
    initialState,
    reducers: {
      ...reducers
    }
  });

  return slice as typeof slice & {name: Name};
}

const clientSlice = createGenericSlice({
  name: 'clients',
  initialState: { status: 'loading' } as GenericState<string>,
  reducers: {
    {get: (state) => {}}
  }
})

then typeof clientSlice ['name'] will be the literal ‘clients’.