Typing dispatch without a global store

[ghost]

Hey all !

I am using redux toolkit without a global store, but only with useReducer. I want to type the dispatch function my components receive.

If I were doing it manually, I would do something like this:

type DoSomethingAction = {
   type: "DO_SOMETHING",
   payload: string
}
...
interface Props {
  dispatch: (a: DoSomethingAction) => void
}

The best I can come with when using createSlice is:

const aSlice = createSlice({
 /*...*/
 reducers: {
  doSomething(state, a: PayloadAction<string>) {
    /*...*/
  }
})

const doSomething = aSlice.actions.doSomething
/*...*/
interface Props {
 dispatch: (a: ReturnType<typeof doSomething>) => void
}

Seeing the comments in #771 , I guess it is not the proper way to do it, and it’s not really nice. What would be a better way to achieve this ?

If I were using a global store, according to the doc I could do:

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>()

It would not match exactly my requirements, because I'd rather be explicit about the only actions my dispatch function is supposed to receive, but it would be close enough.

[phryneas]

The correct type for that reducer would be Dispatch<AnyAction>. It doesn't matter what is dispatched as long as it is a valid action - some actions will just be ignored while others won't be.

That is also what you would get from store - with additional middleware typings, which don't play a role in your case.

[ghost]

From a reducer perspective yes, an invalid action won‘t fail. But my goal is to type dispatch properly, hence I will not be able to dispatch something else in the component. If I were to use loose typings for dispatch, I won’t have any runtime error, but I could dispatch something "silly" by mistake:

const MyComponent: FC<{ dispatch: (a: Dispatch<AnyAction>) }> = ({ dispatch }) => {
  /*...*/
  dispatch(theWrongAction())
}

[phryneas]

Well, there is nothing setting these actions apart on a type level. And we pretty much see this tracking of union types as an antipattern, since it is a lot of code for very little benefit and in a real Redux store there will be other actions dispatched and that is totally okay.
You could try something like a linter rule that only accepts dispatch from an action creator, which should catch most errors.

You could also look into an old library of mine, use-local-slice, which gives you pre-bound dispatcher functions.

[ghost]

Thank you very much for your answer. I guess the key is "in a real Redux store", because there is only one dispatch function, and every component should be able to dispatch any action.

But when we have multiple "local" reducers (with useReducer but no global store), I think having some strict typings help. Typescript is able to tell me that I try to dispatch mySillyAction, but given the place where dispatch was created, and how it was passed from a component to another, it knows the corresponding reducer does not care about mySillyAction (I mean if the reducer was created "manually" with strict typings).

[phryneas]

As I said, there is no way of distinguishing the action-generator-generated actions on a type level.

[ghost]

Yes, I did not get that in the first place, thank you. I was trying to explain why I was looking for that. Thank you for your help and all the good work.