arrays - 迭代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. 你的减速机应该是一个。配置正确，具有类型安全性。湾。您的 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 })) }) ); }) ); });

我尚未测试此代码，因此请使用您的智能感知来修复错误类型（如果有）。

• 对不起，code而不是代码块格式，SO 4 个空格由于某种原因无法正常工作。