Typescript and redux toolkit

Question

How can I make an array of Recipe type in Initialvalue, and how to make Payloadaction as a object type? I am a typescript beginner unfortunetly.

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

type Recipe = {
    title: string, 

}

const INITIAL_VALUE = {
    recipes: []
}


const recipeSlice = createSlice({
    name: 'recipe',
    initialState: INITIAL_VALUE,
    reducers: {
        addRecipe(state, action: PayloadAction<{}>) {
            state.recipes.push(action.payload)
        }
    }
    
})

Titian Cernicova-Dragomir · Accepted Answer · 2022-02-04 12:00:55Z

3

[] will be an array of never since there isn't any information about the type of an element in the array. The simplest thing you could do is assert [] to be Recipe[]

const INITIAL_VALUE = {
    recipes: [] as Recipe[]
}


const recipeSlice = createSlice({
    name: 'recipe',
    initialState: INITIAL_VALUE,
    reducers: {
        addRecipe(state, action: PayloadAction<Recipe>) {
            state.recipes.push(action.payload)
        }
    }
    
})

Playground Link

You could also provide an explicit type annotation for INITIAL_VALUE but that will require you do it for all properties and will require you define the properties in two places:

const INITIAL_VALUE: {
    recipes: Recipe[]
} = {
    recipes: []
}

Playground Link

edited Feb 4, 2022 at 12:00

answered Feb 4, 2022 at 11:59

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kay Over a year ago

Thanks a lot, I tried on my own but I modified INITIAL_VALUE using bad practice like const INITIAL_VALUE: { recipes: Recipe[] } = { recipes: [] }. Once again thanks for a cleaner solution

Collectives™ on Stack Overflow

Typescript and redux toolkit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related