Redux Toolkit slice with TypeScript expected 0 arguments, but got 1

Question

I have slice

const investment = createSlice({
  name: 'investments',
  initialState,
  reducers: {
    getInvestmentsRequest(state) {
      state.investments.status = RequestStatuses.loading;
    },
  }
})

And action is intercepted by middleware. Middleware use payload. But in slices I am not need use payload. If I set payload as second argument eslint will throw error with unused vars. Caller code:

dispatch(getInvestmentsRequest({ term: product.term }));

And I have TS error Expected 0 arguments, but got 1.

Anybody know how to resolve this typechecking conflict with TS, Redux Toolkit (slice) and redux-saga ?

it seems that you should pass the second argument to your `getInvestmentsRequest` reducer with payload object — Oro, Aug 19 '21 at 08:31
If I set payload as second argument eslint will throw error with unused vars — Dmitriy Glazkov, Aug 19 '21 at 08:34

phry · Answer 1 · 2021-08-19T10:20:21.137

If you have a good reason to add that second argument there (and you have, after all you want to specify a payload type for general type safety, even if it is not used in there), that eslint rule just does not make sense and actively hinders you from doing something useful.

And here is the point: you have active control over those eslint rules. It's your responsibility to maintain them in a way that makes sense to you.
And after Marie Kondo: if it does not spark joy, get rid of it.

You can configure what the no-unused-vars rule marks as a linter error. In this case, you probably want to set the argsIgnorePattern to just not warn for any argument called action.

Try it out by writing

/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^(_|action)" }]*/

at the top of your file, and when it does what you want move it over to your .eslintrc.js config file.

this is useful comment – Dmitriy Glazkov Aug 19 '21 at 09:55 — Dmitriy Glazkov, Aug 19 '21 at 09:55

score 0 · Answer 2 · answered Aug 19 '21 at 09:11

As TypeScript checks for type safety, it won't allow us to pass arguments to functions without defining respective parameters.

getInvestmentsRequest(state, action) {
  state.investments.status = RequestStatuses.loading;
}

It is necessary to define action parameter if you are passing values to this function, otherwise typescript will throw error. action parameter is an object which has a property on it called payload which points to the value that you are passing to this function.

if you want to use the term value, you can do so by using the following:

state.investments.term = action.payload.term;

Redux Toolkit slice with TypeScript expected 0 arguments, but got 1

2 Answers2