Iterating ngrx8 reducers - arrays

Question

Interface:
export interface IClient extends Array<IClient> {
client_name: string
}
Actions:
export const addClientSuccess = createAction(
'[CLIENT] ADD_CLIENT_COMPLETE',
props<{ client_name: IClient }>()
);
Reducers:
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]
})
))
Effects:
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 }))
})
);
})
);
});
With the above code I'm trying to append arrays to client_name but the value I enter gets separated into multiple values inside an array, I have attached the redux store on how it gets iterated.
For example if I have test and testing entered it should print a ['test',"testing"]

Answer 1

youre doing it wrong.
your interface should not be extending Array<IClient>. its a simple string.
export interface IClient {
client_name: string;
}
your state should contain meaningful names: client_name**s**: IClient[]
export interface ClientState {
client_names: IClient[]
}
export const clientInitialState: ClientState = {
client_names: []
}
your reducer should be
a. configured correctly, to have type safety.
b. your client_name array, should contain previous clients initialized before adding a new client. use the spread operator.
export const clientReducer = createReducer(
clientInitialState,
on(ClientActionTypes.addClientSuccess,(state, action) => ({
...state,
client_names: [...state.client_names, action.client_name]
})
your effect should also be configured correctly:
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 }))
})
);
})
);
});
I haven't tested this code, so use your intellisense to fix mistypes if any.
sorry on the code instead of code-blocks formatting, SO 4 spaces isn't working properly for some reason.