What could be causing TypeScript to throw errors regarding the initialState type when defining redux slices with createSlice in reduxToolkit, despite it being the correct type specified?

Question

What could be causing TypeScript to throw errors regarding the initialState type when defining redux slices with createSlice in reduxToolkit, despite it being the correct type specified?

Here is my implementation of the createSlice() function:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

type TransferDeckModeType = "pipetting" | "evaluation" | "editing";

var initialState: TransferDeckModeType = "pipetting";

const transfer_deck_mode = createSlice({
  name: "transfer_deck_mode",
  initialState,
  reducers: {
    setTransferDeckMode(state, action: PayloadAction<TransferDeckModeType>) {
      let newState = action.payload;
      return newState;
    },
  },
});

export const { setTransferDeckMode } = transfer_deck_mode.actions;

export default transfer_deck_mode.reducer;

An issue arises with the setTransferDeckMode function in Typescript.

Type '(state: "pipetting", action: { payload: TransferDeckModeType; type: string; }) => TransferDeckModeType' is not assignable to type 'CaseReducer<"pipetting", { payload: any; type: string; }> | CaseReducerWithPrepare<"pipetting", PayloadAction<any, string, any, any>>'.
  Type '(state: "pipetting", action: { payload: TransferDeckModeType; type: string; }) => TransferDeckModeType' is not assignable to type 'CaseReducer<"pipetting", { payload: any; type: string; }>'.
    Type 'TransferDeckModeType' is not assignable to type 'void | "pipetting"'.
      Type '"evaluation"' is not assignable to type 'void | "pipetting"'.ts(2322)
(method) setTransferDeckMode(state: "pipetting", action: PayloadAction<TransferDeckModeType>): TransferDeckModeType

The unexpected presence of 'void' raises questions about the state declaration. What is introducing 'void' and setting it alongside ""pipetting""? It's puzzling as the state should not be void in this context.

There seems to be confusion on where to specify the state of the slice. Shouldn't it be inferred from the type of initialState? This oversight is causing confusion.

Interestingly, changing the type of initialState to string resolves the error.


var initialState: string = "pipetting";

However, this solution feels inadequate. Why can't I define the type of the initialState directly?

typescript redux-toolkit

Answer 1

Answer №1

This is the exact reason why the RTK documentation displays

var initialState = "pipetting" as TransferDeckModeType ;

instead.

With TypeScript conducting flow analysis in this scenario, you have the opportunity to test it out on this TypeScript Playground

function something<T>(initialState: T) { return { initialState } }
type Values = 'a' | 'b'

{
var initialState: Values = 'a';
//    ^?

const derivedValue = something(initialState)
//    ^?
// Through flow analysis, TS considers `initialState` as `'a'`
// and associates `derivedValue` with `{ initialState: "a" }`
}

{
var initialState = 'a' as Values;
//    ^?

const derivedValue = something(initialState)
//    ^?
// In this scenario, a type assertion could prevent that,
// instructing TS to not be overly intelligent
}

Answer 2

This is the exact reason why the RTK documentation displays

var initialState = "pipetting" as TransferDeckModeType ;

instead.

With TypeScript conducting flow analysis in this scenario, you have the opportunity to test it out on this TypeScript Playground

function something<T>(initialState: T) { return { initialState } }
type Values = 'a' | 'b'

{
var initialState: Values = 'a';
//    ^?

const derivedValue = something(initialState)
//    ^?
// Through flow analysis, TS considers `initialState` as `'a'`
// and associates `derivedValue` with `{ initialState: "a" }`
}

{
var initialState = 'a' as Values;
//    ^?

const derivedValue = something(initialState)
//    ^?
// In this scenario, a type assertion could prevent that,
// instructing TS to not be overly intelligent
}

What could be causing TypeScript to throw errors regarding the initialState type when defining redux slices with createSlice in reduxToolkit, despite it being the correct type specified?

Answer №1

Similar questions

Utilize clipboard functionality in automated tests while using Selenium WebDriver in conjunction with JavaScript

Decrease initial loading time for Ionic 3

Error: The reference to "global" is undefined and was not caught in the promise

Prisma : what is the best way to retrieve all elements that correspond to a list of IDs?

Angular 2 routing for dynamic population in a grid system

Creating a concise TypeScript declaration file for an established JavaScript library

A guide on determining the number of rows in an ag-grid with TypeScript and Protractor

The output type of a function given an input

The implementation of race in React Redux Saga is proving to have negligible impact

Module not found: vueform.config

Issue with TypeScript retrieving value from an array

What is the method of duplicating an array using the array.push() function while ensuring no duplicate key values are

A Promise is automatically returned by async functions

Incorrect typings being output by rxjs map

The library path in a react (js) integrated mono repo could not be resolved by Nx 16

Error message: There appears to be a type error within the labelFunc of the KeyBoardDatePicker component in the Material-UI

Can React Hooks API be used in TypeScript without using JSX?

Is it possible to assign a type conditionally depending on the value of a boolean?

The TypeScript compiler does not allow a 'number' type to be assigned to 0, 10, or 20, even when the number itself is 0

What is the process of transforming two forms into components and then integrating those components into a view in Angular 5?