通過Redux的Reducer更新列表

我正在製作一個用於React學習目的的小配方列表（因爲我是新手）。通過Redux的Reducer更新列表

我能弄清楚如何從列表中添加和刪除食譜。然而，我很難從列表中編輯配方（應用程序的狀態）。

從終極版的文檔以下：

因爲我們想不訴諸突變更新數組中的特定項目，我們必須創建具有相同項新陣列除了索引處的項。

我遇到麻煩如何選擇數組中的特定項目時，選擇自己的數組被修改。

這裏是我的操作文件：

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

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

的src /減速/ reducer_recipe區別於數組列表的操作？

來源

2016-08-29 Alejandro

你應該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都是整數。

來源

2016-08-30 07:51:43 bnsd55

真棒，我把你的想法，並在我的行動文件執行： '出口功能addRecipe（食譜）{ const ID = shortid.generate（）; 返回{ 類型：RECIPE_ADD，有效載荷：配方， ID：shortid.generate（） } }' 它確實起作用正確拾取所選配方 – Alejandro

也許類似的東西的工作：

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

來源

2016-08-29 23:12:27 Sotiris

我忘了提及用戶可以編輯配方和/或配料本身。所以這wouldnt工作 – Alejandro

通過Redux的Reducer更新列表

回答

相關問題