Dispatch actions with Redux Toolkit requires two arguments

Question

Using Redux Toolkit, I'm trying to dispatch an action without context of event or etc., so I get the following error:

error TS2554: Expected 2 arguments, but got 1. An argument for 'action' was not provided.

With following code:

const App = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    (async () => {
      const result = await fetchConfig();
      dispatch(setConfig({ ConfigReducerState: result })); // ---> Error is here <---
    })();
  }, [dispatch]);
};

The reducer:

export const configSlice = createSlice({
  name: 'config',
  initialState,
  reducers: {
    setConfig(state, action) {
      const { server, map } = action.payload;
      state.server = server;
      state.map = map;
    },
  },
});

Usually I give one parameter to action creator functions - object representing the payload, no need to refer the state. But here I can't. What am I doing wrong?

Answer 1

I've seen this before and every time, it was... a bug in IntelliJ/WebStorm.

See https://youtrack.jetbrains.com/issue/WEB-46527 and https://youtrack.jetbrains.com/issue/WEB-42559 - essentially, WebStorm has their own "quick TypeScript interpolation that does not use the official tsserver for type checking, but something self-cooked, that guesses types just based on things having similar names - and regularly gets things wrong.

If I understand their system correctly, you should be able to see the correct types by hovering over while holding Ctrl down.

In the end, I can't really tell you how to fix this other than switching to an IDE that does not randomly guess, but actually uses TypeScript to evaluate TypeScript types.

Answer 2

How did you import setConfig? I had the same issue and it turned out that by mistake I used

import setConfig from './configSlice'

instead of

import { setConfig } from './configSlice'

It was importing the default export (whole slice reducer, aliased as setConfig) instead of just this one function...