reactjsreduxwebstormredux-toolkit

Redux-toolkit action arguments in WebStorm


I started using redux toolkit, but when I try to dispatch an action with arguments I get a warning from IDE saying:

"Argument type {...} is not assignable to parameter type {payload: {...}}"
Argument type {...} is not assignable to parameter type {payload: {...}}

or "Invalid number of arguments, expected 2"
Invalid number of arguments, expected 2

I guess it thinks that the state should be the first argument.

Any way to correct this?

EDIT: I found a temporary solution for this specific issue. Basically, what I did was, I moved those actions out of the file.

If before I had:

// reducer.js
const state = createSlice({
  // ...
  reducers: {
    handleNumber(state, action){}
  }
})

export const { handleNumber } = state.actions
export default state.reduer

now I have:

// reducer.js
export const state = createSlice({
  // ...
  reducers: {
    handleNumber(state, action){}
  }
})

export default state.reducer
// actions.js
import { state } from './reducer'

export const { handleNumber } = state.actions

As said in the comment. Webstorm seems to pattern match stuff if those names are in the same file. But if they are in separate files, it looks into the typescript definition.

But it raises another issue, now when I Ctrl + click the function name in actions.js, instead of going to the function, it navigates to type declaration.


Solution

  • RTK co-maintainer here. This looks very curious and should definitely work. I'd like to look deeper into this. Could you please create a reproduction repository with this problem and post it to our github issue tracker?