CODEWITHSUNDEEP
typescriptredux
Nikomtis
Nikomtis

Reputation: 64

Why "boolean" becomes "false & true" in PayloadAction in redux-starter-kit?

I am using redux-starter-kit in React project. I am trying to describe type of action payload in reducer in createSlice method.

I have two reducers:

setFetchingMenuItems: (
  state: IPagesState,
  { payload }: PayloadAction<boolean>
) => {
  state.isFetchingMenuItems = payload;
},
setMenuItems: (
  state: IPagesState,
  { payload }: PayloadAction<IMenuItemViewModel[]>
) => {
  state.menuItems = payload;
},

The second one works as expected. If I try to dispatch setMenuItems action, it accepts only array of IMenuItemViewModel.

But if I try to dispatch setFetchingMenuItems action with true or false payload, TypeScript shows me error: "TS2345: Argument of type 'false' is not assignable to parameter of type 'false & true'."

What I am missing?

UPDATE:

Here is my async method where I dispatch actions:

export const fetchMenuItems = () => async (
  dispatch: Dispatch
): Promise<void> => {
  dispatch(setFetchingMenuItems(true));

  try {
    const { value } = await PageService.getMenuItems();

    dispatch(setMenuItems(value));
  } catch (e) {
    console.log(e);
  }

  dispatch(setFetchingMenuItems(false));
};

TypeScript version is 3.5.1.

Upvotes: 2

Views: 1180

Answers (2)

Nikomtis
Nikomtis

Reputation: 64

The problem was in redux-starter-kit (I had version 0.5.1). Version 0.6.0 fixes it. So I updated to 0.6.2 and now it works.

Upvotes: 2

Simon Kocurek
Simon Kocurek

Reputation: 2166

The expansion to true | false seems to be an active issue with Typescript. What seems strange is that it's expanded to false & true instead of false | true.

To fix your problem you could try replacing boolean with false | true.

Upvotes: 0

Related Questions