Angular5 ngrx/store 改变数组的值

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

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

switch (action.type) {
   case UserActions.INCREMENT_ID: {
      const users = state.users;
      if (users && users.length > 0) {
         users[0].id += 1;
      }
      // you could also just return the state because the reference to users stays the same
      return {
         ...state,
         users: users
      }
   }
}

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

Answer 2

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

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

Angular5 ngrx/store 改变数组的值

Angular5 ngrx/store changing a value of array

ngrx

angular

ngrx-store