Typescript 和 redux 工具包

Question

如何在 Initialvalue 中創建一個 Recipe 類型的數組，以及如何將 Payloadaction 設置為 object 類型？ 不幸的是，我是 typescript 初學者。

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)
        }
    }
    
})

Answer 1

[]將是一個never數組，因為沒有關於數組中元素類型的任何信息。 您可以做的最簡單的事情是將[]斷言為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)
        }
    }
    
})

游樂場鏈接

您還可以為INITIAL_VALUE提供顯式類型注釋，但這需要您為所有屬性執行此操作，並且需要您在兩個位置定義屬性：

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

游樂場鏈接