迭代NGRX8减速器

Question

接口：

export interface IClient extends Array<IClient> {
  client_name: string
}

动作：

export const addClientSuccess = createAction(
  '[CLIENT] ADD_CLIENT_COMPLETE',
  props<{ client_name: IClient }>()
);

减速器：

export interface ClientState {
    client_name: IClient[]
}

export const clientInitialState: ClientState = {
    client_name: []
}

export const clientReducer = createReducer(
clientInitialState,
on(ClientActionTypes.addClientSuccess,(state, {client_name}) => ({
  ...state,
  client_name: [...client_name]
})

））

效果：

addClient = createEffect(() => {
    return this.actions.pipe(
      ofType(ClientActionTypes.addClient),
      switchMap(({ client }) => {
        return this.clientService.addClient(client).pipe(
          map((res) => ClientActionTypes.addClientSuccess(res)),
          catchError(error => {
            return of(ClientActionTypes.addClientFailure({ error }))
          })
        );
      })
    );
  });

使用上面的代码，我试图将数组追加到client_name，但是我输入的值在数组内分成多个值，我在redux存储上附加了如何迭代的信息。

例如，如果我输入了测试并进行了测试，则应打印['test'，“ testing”]

Answer 1

您做错了。

1. 您的接口不应扩展Array<IClient>。它是一个简单的字符串。

   export interface IClient { client_name: string; }

2. 您的州应该包含有意义的名称：client_name**s**: IClient[]

   export interface ClientState { client_names: IClient[] }

   export const clientInitialState: ClientState = { client_names: [] }

3. 您的减速器应为 一种。配置正确，具有类型安全性。 b。您的client_name数组应包含在添加新客户端之前初始化的先前客户端。使用价差运算符。

   export const clientReducer = createReducer( clientInitialState, on(ClientActionTypes.addClientSuccess,(state, action) => ({ ...state, client_names: [...state.client_names, action.client_name] })

4. 您的效果还应该正确配置：

   addClient$ = createEffect(() => { return this.actions.pipe( ofType(ClientActionTypes.addClient), switchMap((action) => { return this.clientService.addClient(action.client_name).pipe( map((res) => ClientActionTypes.addClientSuccess({ client_name: res})), catchError(error => { return of(ClientActionTypes.addClientFailure({ error })) }) ); }) ); });

我尚未测试此代码，因此请使用您的intellisense修复错误类型（如有）。

• 抱歉code而不是代码块格式，由于某些原因，SO 4空间无法正常工作。