TypeScript type mismatch when integrating Redux Toolkit with createSlice and custom middleware
I'm trying to debug I'm upgrading from an older version and I can't seem to get I've been struggling with this for a few days now and could really use some help... I'm facing a type mismatch error while trying to integrate Redux Toolkit with TypeScript, specifically when using `createSlice`. I have a custom middleware that needs to intercept actions and modify their payloads, but TypeScript doesn't seem to infer the types correctly. Here's the relevant slice definition: ```typescript import { createSlice, PayloadAction } from '@reduxjs/toolkit'; import { AppThunk } from '../store'; interface UserState { names: string[]; } const initialState: UserState = { names: [], }; const userSlice = createSlice({ name: 'user', initialState, reducers: { addUser: (state, action: PayloadAction<string>) => { state.names.push(action.payload); }, removeUser: (state, action: PayloadAction<number>) => { state.names.splice(action.payload, 1); }, }, }); export const { addUser, removeUser } = userSlice.actions; export default userSlice.reducer; ``` I also have a custom middleware that modifies the `addUser` action to append a timestamp to the payload: ```typescript const timestampMiddleware = store => next => action => { if (action.type === 'user/addUser') { action.payload = `${action.payload} - ${Date.now()}`; } return next(action); }; ``` The problem occurs when I dispatch the action with the modified payload. TypeScript throws an error stating `Argument of type '{ type: string; payload: string; }' is not assignable to parameter of type 'PayloadAction<string>'`. I tried explicitly typing the action in the middleware, but that leads to further complications. ```typescript const dispatchWithTimestamp = (user: string): AppThunk => dispatch => { const action = addUser(user); timestampMiddleware(store)(dispatch)(action); }; ``` I've also tried using `as PayloadAction<string>` when dispatching, but it results in a runtime error where the state is not updated as expected. Any insights on how to properly type the modified action in TypeScript without running into type mismatches? Also, is there a better way to structure the middleware to work seamlessly with Redux Toolkit and TypeScript? I'm working on a application that needs to handle this. Thanks in advance! This is part of a larger web app I'm building. Hoping someone can shed some light on this. The stack includes Typescript and several other technologies. Could this be a known issue? My team is using Typescript for this REST API. For reference, this is a production desktop app. What's the correct way to implement this?