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

只是一个想法...