Redux-toolkit action arguments in WebStorm

Question

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: {...}}"

or "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.

Answer 1

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?

Answer 2

I have had a similar problem, I am not sure what is causing the problem, but I found removing/renaming your (hidden) .idea folder is useful. After that restart Webstorm and it should generate a new .idea folder that works.

So the problem seems to be there is something in Webstorm IDEA default settings that is causing this problem. Be sure to rename the .idea folder first if you're not sure if you want to keep some settings.

Hope this works!

Answer 3

我有同样的问题，但删除 .idea 并重新启动 ide 工作。

Answer 4

it works of you export the actions with a different name, for example

const exmapleSlice = createSlice({
  name: 'exmapleSliceId',
  initialState: exmapleSliceInitialState,
  reducers: {
    _changeSomeField(state, action){
      state.someField = action.payload;
    }
  }
});

export const {
  _changeSomeField: changeSomeField,
} = exmapleSlice.actions;