通过 Redux 的 Reducer 更新列表

Question

为了学习 React（因为我是新手），我正在制作一个小食谱列表。

我能够弄清楚如何从列表中添加和删除食谱。但是我很难从列表（应用程序的状态）中编辑食谱。

根据 Redux 的文档：

Because we want to update a specific item in the array without resorting to mutations, we have to create a new array with the same items except the item at the index.

当 selected 本身的数组被修改时，我无法 select 数组中的特定项目。

这是我的动作文件：

src/actions

export const RECIPE_ADD = 'RECIPE_ADD';
export const RECIPE_EDIT = 'RECIPE_EDIT';
export const RECIPE_DELETE = 'RECIPE_DELETE';
export function addRecipe(recipe) {
  return {
    type: RECIPE_ADD,
    payload: recipe
  }
}
export function editRecipe(recipe) {
  return {
    type: RECIPE_EDIT,
    payload: recipe
  }
}
export function deleteRecipe(recipe) {
  return {
    type: RECIPE_DELETE,
    payload: recipe
  }
}

src/reducers/reducer_recipe

import { RECIPE_ADD } from '../actions/index';
import { RECIPE_DELETE } from '../actions/index';
import { RECIPE_EDIT } from '../actions/index'

const defaultList = [
  { recipe: 'Pizza', ingredients: ['tomato-sauce','cheese','peperoni'] },
  { recipe: 'Pie', ingredients: ['dough','cherry'] },
  { recipe: 'Curry', ingredients: ['rice','sauce','carrots'] },
];

export default function(state = defaultList, action){
  switch (action.type) {
    case RECIPE_ADD:
      return [
        { recipe: action.payload[0], ingredients: action.payload[1] },
        ...state
      ];
    case RECIPE_DELETE:
    let index = state.map(x => x.recipe).indexOf(action.payload.recipe)
      return (
        state.slice(0,index).concat(state.slice(index + 1))
      )
    case RECIPE_EDIT:
    console.log(action.payload)
    // action.payload is the updated selected recipe
      return (
        state
      )
  }
  return state;
}

我怀疑我需要在操作中添加一个 id 以将其与数组列表区分开来？

Answer 1

也许类似的东西可以工作：

import { RECIPE_ADD } from '../actions/index';
import { RECIPE_DELETE } from '../actions/index';
import { RECIPE_EDIT } from '../actions/index'

const defaultList = [
  { recipe: 'Pizza', ingredients: ['tomato-sauce','cheese','peperoni'] },
  { recipe: 'Pie', ingredients: ['dough','cherry'] },
  { recipe: 'Curry', ingredients: ['rice','sauce','carrots'] },
];

export default function(state = defaultList, action){
  switch (action.type) {
    case RECIPE_ADD:
      return [
        { recipe: action.payload[0], ingredients: action.payload[1] },
        ...state
      ];
    case RECIPE_DELETE:
      let index = state.map(x => x.recipe).indexOf(action.payload.recipe)
        return (
          state.slice(0,index).concat(state.slice(index + 1))
        )
    case RECIPE_EDIT:
      return state.map((recipe)=> {
        if( recipe.name === action.payload.name ) {
          return action.payload
        } else {
          return recipe;
        }
        return recipe;
      });
  }
  return state;
}

Answer 2

您应该为 defaultList 中的对象添加一个 id：

const defaultList = [
  { id: 1, recipe: 'Pizza', ingredients: ['tomato-sauce','cheese','peperoni'] },
  { id: 2, recipe: 'Pie', ingredients: ['dough','cherry'] },
  { id: 3, recipe: 'Curry', ingredients: ['rice','sauce','carrots'] },
];

然后更新你的食谱：

    case RECIPE_EDIT:
      return state.map((recipe)=> {
        if( recipe.id == action.payload.id ) {
          return action.payload
        } else {
          return recipe;
        }
      });

只有当您确定 recipe.id 和 action.payload.id 都是整数时，您才应该在 if 条件下使用 === 而不是 ==。

通过 Redux 的 Reducer 更新列表

Update List via Redux's Reducer

reducers

reactjs

redux

react-redux