如何定義Reducer（ReactJS + Redux）中數組內數組的數組中的對象的狀態？

Question

所以在我的reducer中，我有一個名爲'todos'的對象數組，'todos'對象的狀態也是一個對象數組，稱爲'comments'。在每個'comments'數組中，我想定義一個字符串狀態'commentText'，但我似乎無法弄清楚如何去做。任何幫助將不勝感激。

以下是我想達到什麼樣的一個例子：

let todoReducer = function(todos = [], action){ 
    switch(action.type){ 
     case 'ADD_TODO': 
      return [{ 
       comments:[{ 
        commentText: action.commentText 
       }] 
      }, ...todos] 

     case 'CREATE_COMMENT_ARRAY': 
      return [{ 
       commentText: action.eventValue 
      ], ...todos.comments] //Referencing todos.comments as 'comments' array of objects of an object of 'todos' array. Would like to directly update if possible and build up 'comments' array. 

     default: 
     return todos 
    } 
} 
export default todoReducer 

新的編輯**：

case 'UPDATE_COMMENT': 
    return todos.map(function(todo){ 
    if(todo.id === action.id){ 
     //want to add a new a 'comment' object to the todo's 'comments' array 
    //Something like the following: 
     todo.comments: [{ 
      commentText: action.commentText 
     }, ...todo.comments] 
    } 
    }) 

Answer 1

這聽起來像一個偉大的使用情況爲.map()陣列方法。

假設你的數據是這樣的：

var todos = [ 
    { 
    id: 1, 
    title: 'Todo 1 Title', 
    body: 'Todo 1 Body', 
    date: 1425364758, 
    comments: [ 
     { 
     id: 1, 
     commentorId: 42069, 
     text: 'Todo 1, Comment 1 Text', 
     date: 1425364758 
     }, 
     { 
     id: 2, 
     commentorId: 42069, 
     text: 'Todo 1, Comment 2 Text', 
     date: 1425364758 
     }, 
     { 
     id: 3, 
     commentorId: 42069, 
     text: 'Todo 1, Comment 3 Text', 
     date: 1425364758 
     } 
    ] 
    }, 
    { 
    id: 2, 
    title: 'Todo 2 Title', 
    body: 'Todo 2 Body', 
    date: 1425364758, 
    comments: [ 
     { 
     id: 1, 
     commentorId: 42069, 
     text: 'Todo 2, Comment 1 Text', 
     date: 1425364758 
     } 
    ] 
    }, 
    { 
    id: 3, 
    title: 'Todo 3 Title', 
    body: 'Todo 3 Body', 
    date: 1425364758, 
    comments: [ 
     { 
     id: 1, 
     commentorId: 42069, 
     text: 'Todo 3, Comment 1 Text', 
     date: 1425364758 
     }, 
     { 
     id: 2, 
     commentorId: 42069, 
     text: 'Todo 3, Comment 2 Text', 
     date: 1425364758 
     } 
    ] 
    } 
]; 

當更新註釋，你需要在todoId傳遞和commentId讓你知道要尋找什麼。當添加註釋，你只需要在一個todoId傳遞，所以你知道哪些待辦事項更新：

const todoReducer = (todos = [], action) => { 
    switch(action.type) { 
    case 'ADD_TODO': 
     return [ 
     action.todo, 
     ...todos 
     ]; 
    case 'ADD_COMMENT': 
     const { todoId, comment } = action; 

     // Map through all the todos. Returns a new array of todos, including the todo with a new comment 
     return todos.map(todo => { 
     // Look for the todo to add a comment to 
     if (todo.id === todoId) { 
      // When the todo to update is found, add a new comment to its `comments` array 
      todo.comments.push(comment); 
     } 
     // Return the todo whether it's been updated or not 
     return todo; 
     }); 
    case 'UPDATE_COMMENT': 
     const { todoId, commentId, commentText } = action; 

     // Map through all the todos. Returns a new array of todos, including the todo with the updated comment 
     return todos.map(todo => { 
     // First find the todo you want 
     if (todo.id === todoId) { 
      // Then iterate through its comments 
      todo.comments.forEach(comment => { 
      // Find the comment you want to update 
      if (comment.id === commentId) { 
       // and update it 
       comment.text = commentText; 
      } 
      }); 
     } 
     // Return the todo whether it's been updated or not 
     return todo; 
     }); 
    default: 
     return todos; 
    } 
}; 
export default todoReducer; 

至於你的有效載荷，你可以讓他們任何你想要的，他們會在創建你的動作創造者。例如，下面是給待辦事項一個唯一的ID，時間戳它ADD_TODO的實現，發射行動之前添加一個空comments數組：

import uuid from 'node-uuid'; 
const addTodo = ({title, body}) => { 
    const id = uuid.v4(); 
    const date = new Date().getTime(); 
    return { 
    type: 'ADD_TODO', 
    todo: { 
     id, 
     title, 
     body, 
     date, 
     comments: [] 
    } 
    }; 
}; 

你ADD_COMMENT行動的創建者可能是這個樣子：

import uuid from 'node-uuid'; 
const addComment = ({todoId, commentorId, commentText}) => { 
    const id = uuid.v4(); 
    const date = new Date().getTime(); 
    return { 
    type: 'ADD_COMMENT', 
    todoId, 
    comment: { 
     id, 
     commentorId, 
     date, 
     text: commentText 
    } 
    }; 
}; 

這是未經測試，但希望給你一個想法。