Question

我想增加一个ID，但我根本不知道如何使用@ngrx / store。

我的默认状态：

const defaultState: UserState = {
    currentId: 1,
    users: [
        {
            id: 1,
            username: 'admin',
            password: 'admin'
        },
        {
            id: 2,
            username: 'admin2',
            password: 'admin2'
        },
        {
            id: 3,
            username: 'admin3',
            password: 'admin3'
        }
    ]
};

例如：

case UserActions.EDIT_CURRENTID:
            return newState(state, {currentId: action.payload});

工作正常，但我想做类似的事情：

case UserActions.INCREMENT_ID:
                return newState(state, {users[0].id: users[0].id + 1});

而且这个没有用。

你能告诉我一些如何处理这个案子的建议吗？

Answer 1

您应该将案例更改为以下内容：

switch(action.type) {
    case UserActions.INCREMENT_ID:
        return {
           ...state,
           users: [
              { 
                 ...state.users[0],
                 id: state.users[0].id + 1
              },
              ...state.users.filter((_, index) => index > 0)
           ]
        }
}

在@ngrx中，最佳做法是使用不可变数据结构。永远不应修改旧状态，也不应修改旧状态内的对象。此方法为所有其他用户使用旧对象时，为已更改的用户创建新的状态对象和新对象。如果您不确定是否有用户列表，则可以通过以下方式展开示例：

switch(action.type) {
    case UserActions.INCREMENT_ID:
        return state.users && state.users.length > 0 
           ? {
                ...state,
                users: [
                   { 
                      ...state.users[0],
                      id: state.users[0].id + 1
                   },
                   ...state.users.filter((_, index) => index > 0)
                ]
             } 
           : state;
}

当然，您可以替换

...state.users.filter((_, index) => index > 0)

与

...state.users.slice(1)

编辑： 或者，您可以使用地图功能：

switch(action.type) {
    case UserActions.INCREMENT_ID:
        return state.users && state.users.length > 0 
           ? {
                ...state,
                users: state.users.map((user, index) => index === 0 
                    ? { 
                         ...user, 
                         id: user.id + 1 
                      }
                    : user)
             } 
           : state;
}

Answer 2

在reducer函数中，将增量大小写更改为

{{1}}

您的第一个案例有效，因为州知道名为 currentId 的属性。

Angular5 ngrx / store更改数组的值

2 个答案: