title: Redux-toolkit action arguments in WebStorm
body: <p>I started using redux toolkit, but when I try to dispatch an action with arguments I get a warning from IDE saying:</p>
  <p>&quot;Argument type {...} is not assignable to parameter type {payload: {...}}&quot;<br />
  <a href="https://i.stack.imgur.com/fjpQE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fjpQE.png" alt="Argument type {...} is not assignable to parameter type {payload: {...}} " /></a></p>
  <p>or &quot;Invalid number of arguments, expected 2&quot;<br />
  <a href="https://i.stack.imgur.com/eWVPo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eWVPo.png" alt="Invalid number of arguments, expected 2" /></a></p>
  <p>I guess it thinks that the state should be the first argument.</p>
  <p>Any way to correct this?</p>
  <p>EDIT:
  I found a temporary solution for this specific issue.
  Basically, what I did was, I moved those actions out of the file.</p>
  <p>If before I had:</p>
  <pre><code>// reducer.js
  const state = createSlice({
    // ...
    reducers: {
      handleNumber(state, action){}
    }
  })
  
  export const { handleNumber } = state.actions
  export default state.reduer
  </code></pre>
  <p>now I have:</p>
  <pre><code>// reducer.js
  export const state = createSlice({
    // ...
    reducers: {
      handleNumber(state, action){}
    }
  })
  
  export default state.reducer
  </code></pre>
  <pre><code>// actions.js
  import { state } from './reducer'
  
  export const { handleNumber } = state.actions
  </code></pre>
  <p>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.</p>
  <p>But it raises another issue, now when I Ctrl + click the function name in <code>actions.js</code>, instead of going to the function, it navigates to type declaration.</p>