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

我只处理第一个＆amp;现在的姓氏。 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的反应

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()的返回值，因为这是为了不改变状态，它不会改变你传入的状态的值。

代码很好;除了类型之外，我倾向于仅在操作上使用一个属性，因此具有（例如） user 的属性，即包含所有用户数据（名字，姓氏等）的对象。

我认为在reducer之外定义默认状态然后将其设置为reducer函数中state参数的默认值是非常惯用的：

export default function (state = initialState, action) {

有关其创作者的精彩介绍，请参阅https://egghead.io/courses/getting-started-with-redux
状态可以是你喜欢的任何形状。随着应用程序的复杂性增加，它通常表示为由不同数据部分组成的对象。因此，例如，在您的情况下，可以由一组用户组成，例如，可以应用于某些UI状态的“order by”）：

{ users: [], orderBy: 'lastName' }
如果您继续使用一组用户作为状态，那么您可以使用ES6点差运算符追加新用户，例如：

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

如果您转向使用对象进行状态，则以下内容同样会附加用户：

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

最后，要更新单个用户，您只需对用户数组使用map，如下所示（这显然是硬编码的，但您可以匹配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（）的情况下工作，它应该与对象一起工作，不是数组：

＆＃13;

var state = {
  user1: {
  	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);

＆＃13;

只是一个想法......

Object.assign不会更新我的状态（React）

2 个答案: