代码之家 › 专栏 › 技术社区 › shaelex

Angular5 ngrx/存储更改数组值

ngrx-store ngrx angular

shaelex · 技术社区 · 8 年前

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

而这个不起作用。

你能给我一些建议如何处理这个案子吗?

2 回复 | 直到 8 年前

pascalpuetz 8 年前

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

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

alsami 8 年前

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

你的第一个案子是有效的,因为州政府知道 当前ID 。