Angular5 ngrx/存储更改数组值

我想增加一个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});

而这个不起作用

---

您能给我一些建议如何处理这种情况吗？

在您的减速机功能中，将增量情况更改为此

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的属性。

在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的属性。

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

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)
           ]
        }
}

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

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

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)
           ]
        }
}

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)

与

编辑： 或者，您可以使用映射功能：

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

---

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

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)
           ]
        }
}

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

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

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)
           ]
        }
}

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)

与

编辑： 或者，您可以使用映射功能：

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