Object.assign不會更新我的狀態（React）

Question

我有一個有幾個用戶的應用程序。我現在想能夠創建一個新用戶。所以我創造了這個actionCreator：

export const createUser = (first, last) => { 
    console.log("You are about to create user: XX "); 
    return { 
     type: 'USER_CREATE', 
     first: first, 
     last: last, 
     payload: null 
    } 
}; 

我與第一&姓氏只處理現在。 actionCreator從容器中獲取參數。有它調用actionCreator像這樣一個按鈕：

 <button onClick={() =>this.props.createUser(this.state.inputTextFirstName, this.state.inputTextLastName)}>Submit</button> 

我UserReducer看起來是這樣的：

/* 
* The users reducer will always return an array of users no matter what 
* You need to return something, so if there are no users then just return an empty array 
* */ 
export default function (state = null, action) { 

    if(state==null) 
    { 
     state = [ 
      { 
       id: 1, 
       first: "Bucky", 
       last: "Roberts", 
       age: 71, 
       description: "Bucky is a React developer and YouTuber", 
       thumbnail: "http://i.imgur.com/7yUvePI.jpg" 
      }, 
      { 
       id: 2, 
       first: "Joby", 
       last: "Wasilenko", 
       age: 27, 
       description: "Joby loves the Packers, cheese, and turtles.", 
       thumbnail: "http://i.imgur.com/52xRlm8.png" 
      }, 
      { 
       id: 3, 
       first: "Madison", 
       last: "Williams", 
       age: 24, 
       description: "Madi likes her dog but it is really annoying.", 
       thumbnail: "http://i.imgur.com/4EMtxHB.png" 
      } 
     ] 
    } 

    switch (action.type) { 
     case 'USER_DELETED': 
      return state.filter(user => user.id !== action.userIdToDelete); 
     case 'USER_CREATE': 
      console.log("Action first:" + action.first); 
      console.log("Action last:" + action.last); 
      Object.assign({}, state, { 
        id: 4, 
        first: action.first, 
        last: action.last, 
        age: 24, 
        description: "Some new Text", 
        thumbnail: "http://i.imgur.com/4EMtxHB.png" 
       }); 
      return state; 
    } 

    return state; 
} 

現在我有幾個問題。 1）這是做到這一點的正確方法，還是我在某處編寫錯誤的代碼？請記住，我試圖在這裏使用Redux，但我不完全確定我是否有時不會回落到沒有Redux的React

2）我是否正確地執行狀態對話？我最初使用教程，我現在建立在這一點，但我不知道爲什麼狀態似乎是一個數組：

state = [ <--- Does this mean that my state is an array? 
       { 
        id: 1, 
        // and so on ... 

我對這個很困惑，因爲在其他教程狀態只是包含其他的對象更小的對象，全部用圓括號{}

3）創建新用戶的最佳方式是什麼？我的Object.assign不起作用，它不更新任何內容，我不確定錯誤在哪裏。

4）而且，相關地，我如何更新一個個人用戶或一個個人用戶的財產？

Answer 1

由於Flyer53指出你需要，因爲這是設計成不發生變異狀態時，它不會改變你傳遞的狀態值的狀態設置爲Object.assign()返回值。

1. 的代碼很好;我傾向於只使用動作中的一個屬性，以及其類型，因此具有（說）用戶的屬性，該屬性是包含所有用戶數據（名，姓等）的對象， 。

   我認爲這是相當地道來定義默認狀態下減速的外面再設置這是在減速功能的狀態參數的默認值：

   export default function (state = initialState, action) {

   對於一個輝煌推出其創建者，請參閱https://egghead.io/courses/getting-started-with-redux

2. 狀態可以是任何你喜歡的形狀。隨着應用程序複雜度的增加，它通常會被表示爲由不同數據段組成的對象。因此，舉例來說，在你的情況下，可以由用戶組成的數組的，並說，一個「ORDER BY」，可以適用於一些UI狀態）：

   { users: [], orderBy: 'lastName' }

3. 如果繼續使用作爲狀態的用戶的陣列然後可以使用ES6傳播操作者將追加新的用戶，例如：

   newState = [ ...state, action.user ];

   而如果移動到使用對象對的狀態，以下將類似地追加用戶：

   newState = Object.assign({}, state, { users: [ ...state.users, action.user ] };

4. 最後，更新你可以只使用地圖對陣列的用戶如下單個用戶（這顯然是硬編碼的，但你可以匹配，比如，對ID和更新相應的屬性）。

   let modifiedUsers = state.users.map((user) => { 
       if (user.id === 3) { 
        user.name = user.name + '*'; 
       } 
       return user; 
   }); 
   let newState = Object.assign({}, state, { users: modifiedUsers }); 
   

Answer 2

有可能在一個對象（而不是在一個數組中你上面的例子代碼）登錄狀態（用戶），如果沒有Object.assign（作品這是應該的工作更簡單的方法）與對象，而不是數組：

var state = { 
 
    user1: { 
 
    \t id: 1, 
 
     first: "Bucky", 
 
     last: "Roberts", 
 
     age: 71, 
 
     description: "Bucky is a React developer and YouTuber", 
 
     thumbnail: "http://i.imgur.com/7yUvePI.jpg" 
 
    } 
 
}; 
 

 
state['user' + 2] = { 
 
    id: 2, 
 
    first: "Joby", 
 
    last: "Wasilenko", 
 
    age: 27, 
 
    description: "Joby loves the Packers, cheese, and turtles.", 
 
    thumbnail: "http://i.imgur.com/52xRlm8.png" 
 
}; 
 

 
console.log(state); 
 
console.log(state.user2);

只是一個想法...