Angular5中使用ngrx/store实现ID自增的方法咨询

我来帮你搞定这个ID自增的逻辑，其实很简单，咱们结合你现有的代码一步步来：

1. 先定义对应的自增Action #

首先你需要在你的action文件（比如user.actions.ts）里定义一个触发自增的action，用@ngrx的createAction会更简洁：

import { createAction } from '@ngrx/store';

// 假设你已经有EDIT_CURRENTID的action，现在新增自增的
export const incrementCurrentId = createAction('[User] Increment Current ID');

// 如果是用传统的Action类写法，也可以这样定义：
// export class IncrementCurrentId implements Action {
//   readonly type = UserActions.INCREMENT_CURRENTID;
// }
// export type UserActions = EditCurrentId | IncrementCurrentId;

2. 在Reducer中处理自增逻辑 #

接下来就是在reducer里编写对应的case逻辑，核心是返回全新的状态对象（ngrx要求reducer是纯函数，不能修改原状态），只更新currentId字段为当前值+1，同时保留其他状态属性：

如果你用的是推荐的createReducer写法： #

import { createReducer, on } from '@ngrx/store';
import { incrementCurrentId, editCurrentId } from './user.actions';

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

export const userReducer = createReducer(
  defaultState,
  // 你现有的EDIT_CURRENTID逻辑
  on(editCurrentId, (state, { payload }) => ({
    ...state,
    currentId: payload
  })),
  // 新增的自增逻辑
  on(incrementCurrentId, (state) => ({
    ...state,
    currentId: state.currentId + 1
  }))
);

如果你用的是传统的switch reducer写法： #

export function userReducer(state = defaultState, action: UserActions): UserState {
  switch (action.type) {
    case UserActions.EDIT_CURRENTID:
      return {
        ...state,
        currentId: action.payload
      };
    // 新增的自增case
    case UserActions.INCREMENT_CURRENTID:
      return {
        ...state,
        currentId: state.currentId + 1
      };
    default:
      return state;
  }
}

3. 触发自增的场景示例 #

如果是在添加新用户时自动触发自增，你可以在dispatch添加用户的操作前，先触发这个自增action，或者在Effect里结合当前ID来处理：

// 比如在组件中添加用户时：
addNewUser(newUser: Omit<User, 'id'>) {
  // 先获取当前ID，用它作为新用户ID再自增
  this.store.select(selectCurrentId).pipe(take(1)).subscribe(currentId => {
    const userWithId = { ...newUser, id: currentId };
    this.store.dispatch(addUser({ user: userWithId }));
    this.store.dispatch(incrementCurrentId());
  });
}

这里的核心思路就是利用ngrx的纯函数特性，通过复制原状态并更新currentId字段来实现自增，完全符合你现有代码的风格。

内容的提问来源于stack exchange，提问作者shaelex