Обновить список через Redux's Reducer

Question

Я делаю небольшой список рецептов для учебных целей на React (так как я новичок в нем).

Мне удалось выяснить, как ADD и DELETE рецепты из списка. Однако мне сложно найти EDIT рецепт из списка (состояние приложения).

Исходя из документа Redux в:

Потому что мы хотим, чтобы обновить определенный элемент в массиве без прибегая к мутациям, мы должны создать новый массив с теми же пунктов, за исключением пункта по индексу ,

У меня возникли проблемы с выбором конкретного элемента в массиве, когда выбранный массив изменен.

Вот подам действия:

SRC/действия

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

ЦСИ/редукторы/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; 
} 

Я подозреваю, что мне нужно, чтобы добавить идентификатор в действия, чтобы отличить его от списка массивов?

Answer 1

Вы должны добавить идентификатор к объектам в defaultList:

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

Вы должны использовать === вместо == on если условие, только если вы уверены, что recipe.id и action.payload.id оба являются целыми.

Answer 2

Может быть что-то подобное для работы:

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