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.

score 4 · Accepted Answer · answered Oct 21 '20 at 16:57

4

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?

answered Oct 21 '20 at 16:57

phry

35,762
5
67
81

here's the repo, I also added a picture in the assets folder. https://github.com/andrei9669/redux-toolkit-webstorm – Andrei Sirotin Oct 22 '20 at 16:53
I see. Unlike VSCode, which would use the TypeScript compiler in the background to find out the types of methods, even when you are writing JavaScript, WebStorm seems to just pattern-match stuff by name. And then it doesn't know the internals, but just "guesses" that `setNumberA` corresponds to the reducer definition, which is obviously wrong. I'm sorry to say that, but in this case, it's just the tooling that's inferior. Can't really do anything about that :( – phry Oct 22 '20 at 19:57
1

looks like there has been an issue for a while now. https://youtrack.jetbrains.com/issue/WEB-42559 – Andrei Sirotin Oct 23 '20 at 08:20

score 2 · Answer 2 · edited Jan 12 '21 at 06:53

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!

score 1 · Answer 3 · answered Sep 01 '22 at 14:32

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;

score 0 · Answer 4 · answered Oct 13 '21 at 11:33

0

I had the same issue but removing the .idea and restarting the ide worked.

answered Oct 13 '21 at 11:33

Flouw Jouw

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 13 '21 at 13:37

Redux-toolkit action arguments in WebStorm

4 Answers4