Object literal may only specify known properties. does not exist in type 'CreateSliceOptions`

Question

I'm just now approaching React-Redux and, following the example found here: https://redux-toolkit.js.org/usage/usage-with-typescript I'm trying to incrementally build what I need. In a brand new infopieceSlice.ts I added this code :

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AppThunk, RootState } from '../../store/store';

interface InfopieceState {
  content: string[];
}

const initialInfopieceState: InfopieceState = {
  content: [],
};

export const infopieceSlice = createSlice({
  name: 'infopiece',
  initialInfopieceState,
  reducers: {
    add: (InfopieceState, action: PayloadAction<string>) => {
      InfopieceState.content.push(action.payload);
    },

  },
});

where in /store/store.ts :

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import logger from 'redux-logger';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware()
    .concat(logger)
});

export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;
export type AppDispatch = typeof store.dispatch; 

I get this errors:

src/features/counter/infopieceSlice.ts:19:3 - error TS2345: Argument of type '{ name: 
string; initialInfopieceState: InfopieceState; reducers: { add: (InfopieceState: unknown,  
action: { payload: string; type: string; }) => void; }; }' is not assignable to parameter of 
type 'CreateSliceOptions<unknown, SliceCaseReducers<unknown>, string>'.
  Object literal may only specify known properties, and 'initialInfopieceState' does not   
exist in type 'CreateSliceOptions<unknown, SliceCaseReducers<unknown>, string>'.

19   initialInfopieceState,
     ~~~~~~~~~~~~~~~~~~~~~

src/features/counter/infopieceSlice.ts:22:7 - error TS2571: Object is of type 'unknown'.

22       InfopieceState.content.push(action.payload);

This is the corresponding code taken by executing, as suggested here: https://redux-toolkit.js.org/introduction/getting-started ,

npx create-react-app my-app --template redux-typescript :

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { AppThunk, RootState } from '../../store/store';

interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  // `createSlice` will infer the state type from the    
// `initialCounterState` argument
  initialState,
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in 
reducers.
      // It doesn't actually mutate the state because it uses the 
Immer library,
      // which detects changes to a "draft state" and produces a brand
new
      // immutable state based off those changes
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    },
    // Use the PayloadAction type to declare the contents of    
//`action.payload`
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});  

My objective is to have an InfopieceState and infopieceSlice which treat string[] , array of strings.

How to fix these types?

Answer 1

You should write initialState: initialInfopieceState, instead of initialInfopieceState in createSlice.

initialState is the key, and if you just write initialInfopieceState that's a shorthand for initialInfopieceState: initialInfopieceState, and initialInfopieceState as key doesn't exist.