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

Adding a QR code on top of an image in a PDF using TypeScript

While developing an exam portal with Angular and Spring Boot, I encountered an issue when trying to incorporate a name field as [name]

Unexpected results observed in enumerators within typescript

React component state remains static despite user input

How can a class be imported into a Firebase Cloud function in order to reduce cold start time?

Implementing recursive functionality in a React component responsible for rendering a dynamic form

Utilizing the dialogue feature within Angular 6

How can I add a new key value pair to an existing object in Angular?

What is the best way to bundle a TypeScript package along with its dependencies for seamless integration with various Next.js projects on a local environment

How to use attributes in Angular 2 when initializing a class constructor

What is the recommended data type for Material UI Icons when being passed as props?

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

activating serverless.yml for aws-xray

Tips on personalizing the formatting alert in Webclipse for Angular 2 using Typescript

SonarLint versus SonarTS: A Comparison of Code Quality Tools

Encountering difficulties with installing bootstrap-vue

Link the Angular Material Table to a basic array

Encountering a Typescript error when trying to invoke a redux action

TypeScript encounters difficulty locating the div element

I encountered a function overload error while creating a component for the API service