Salut les curieux, les curieuses
Quand on travaille avec react, redux, et le redux toolkit, on peut tomber sur des cas tricky qui peuvent nous faire perdre de précieuses minutes.
C’est le cas que je propose ici.
Dans mon store, j’ai :
export const store = configureStore({
reducer: {
player: playerReducer,
otherPlayers: otherPlayersReducer
},
middleware: [
//createPlayersMiddleware({}).get
]
});J’ai une ThunkAction.
export const setPlayerIsConnected = createAsyncThunk<{}, PlayerSocketPayload>(
"player/isConnected",
async(payload: PlayerSocketPayload) => {
return await payload.service.setIsConnected(payload.player);
},
);
Et quand je veux dispatch, j’obtiens l’erreur suivante :
TS2345: Argument of type ‘AsyncThunkAction {}, PlayerSocketPayload, {}’ is not assignable to parameter of type ‘AnyAction’.
Comment résoudre le problème ?
Quand on survole le dispatch, on a cette information :
Le point clef c’est qu’on voit qu’il attend un AnyAction. C’est bien là le problème !
Allons dans notre store, sur la partie middleware :
Nous notons de nouveau le AnyAction.
Et si, en enlevant ce middleware, ça pouvait permettre un vrai typage (une bonne inférence de type) ?
Bingo !