Question

我正在使用react，打字稿，redux创建一个简单的应用程序来管理我的配料，但是以某种方式我无法用我的代码来管理它。我有以下内容：

我在此文件中声明的type.ts：

<Grid>
   <CheckBox Grid.Row="5" Grid.Column="1" HorizontalAlignment="Center" Margin="0,4,10,0" VerticalAlignment="Center" IsChecked="{Binding AutoAdd, Mode=TwoWay}">
      <CheckBox.ToolTip>
         <StackPanel>
            <TextBlock Foreground="{Binding Path=Foreground, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}"   FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Automatically Add To Path</TextBlock>
            <TextBlock Foreground="{Binding Path=Foreground, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}">
               If this path is associated with the primary configuration,
               <LineBreak />
               automatically add newly instantiated optical elements to the end of the path.
            </TextBlock>
            <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
            <WrapPanel>
               <Image Margin="0,0,5,0" />
               <TextBlock Foreground="{Binding Path=Foreground, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type ToolTip}}}" FontStyle="Italic">Press F1 for more help</TextBlock>
            </WrapPanel>
         </StackPanel>
      </CheckBox.ToolTip>
   </CheckBox>
</Grid>

Answer 1

打开

[...action.ingredientName]: state.ingredients[action.ingredientName] + 1

进入

[action.ingredientName]: state.ingredients[action.ingredientName] + 1

并在您的DELETE案例中删除数组，因为初始状态是对象而不是数组。

case DELETE_INGREDIENT:
      return {
          ...state, 
        [action.ingredientName]: state[action.ingredientName] - 1
          
      };

并在此处更改您的类型

import {
  Ingredient,
  ADD_INGREDIENT,
  DELETE_INGREDIENT,
  OrderActionTypes,
} from "./types";

export function addIngredient(newIngredient: keyof Ingredient): OrderActionTypes {
  return {
    type: ADD_INGREDIENT,
    ingredientName: newIngredient,
  };
}

export function deleteIngredient(Ingredient: keyof Ingredient): OrderActionTypes {
  return {
    type: DELETE_INGREDIENT,
    ingredientName: Ingredient,
  };
}

以及您的类型

export interface Ingredient {
  cheese: number;
  bacon: number;
  mushrooms: number;
  ananas: number;
}

export const ADD_INGREDIENT = "ADD_INGREDIENT";
export const DELETE_INGREDIENT = "DELETE_INGREDIENT";

interface AddIngredientAction {
  type: typeof ADD_INGREDIENT;
  ingredientName: keyof Ingredient;
}

interface DeleteIngredientAction {
  type: typeof DELETE_INGREDIENT;
  ingredientName: keyof Ingredient;
}

export type OrderActionTypes = AddIngredientAction | DeleteIngredientAction;

Answer 2

您可以这样尝试吗？

const initialState= {
 Ingredient: {
      cheese: 0,
      bacon: 0,
      mushrooms: 0,
      bananas: 0,
}
}

由于您的initialState具有成分，因此请使用state.Ingredient：

case DELETE_INGREDIENT:
      return {
       Ingredients: [
          ...state.Ingredient, 
        [action.ingredient]: state.Ingredient[action.ingredient] -1
          
        ],
      };

更新减速器中的嵌套对象

2 个答案: