I have this angular store configuration
action.ts
export const saveUserAction = createAction(
'[User] Save',
props<{ payload: User }>
);
export const saveUserSuccessAction = createAction(
'[User] Save Success',
props<{ data: User }>
)
reducer.ts
export const reducer = createReducer(
initialState,
on(loadUsers, (state) => ({...state, isLoading: true})),
on(UserAction.loadUsersSuccess, (state, {data: users}) => ({...state, data: users, isLoading: false})),
on(UserAction.loadUsersFailure, (state, error) => ({...state, error: error, isLoading: false})),
on(saveUserFailureAction, (state, error) => ({...state, isLoading: false, error: error})),
on(saveUserSuccessAction, (state, {data: user}) => ({...state, isLoading: false, selectedUser: user})),
);
effect.ts
saveUserEffect$ = createEffect(() => this.actions$.pipe(
ofType(saveUserAction),
switchMap((action: ActionType<typeof saveUserAction>) => {
return this.userService.saveUser(action.payload).pipe(
map((user) => {
return saveUserSuccessAction(user)
}),
catchError(error => observableOf(saveUserFailureAction({error: error})))
)
})
))
Typescript complains
TS2339: Property 'payload' does not exist on type 'ActionCreatorProps{ payload: User; }> & TypedAction"[User] Save"> & { type: "[User] Save"; }'
and in the reducer on saveUserSuccessAction
it complains
TS2339: Property 'data' does not exist on type 'ActionCreatorProps{ data: User; }> & TypedAction"[User] Save Success"> & { type: "[User] Save Success"; }'
it seems strong type is very difficult in java-script. I don't want to use any type
How can I make it work?
Found the issue props<{ payload: User }>
should be props<{ payload: User }>()
Also props<{ data: User }>
should be props<{ data: User }>()