使用NgRx调用Post接口时传入空对象的问题排查

我是NgRx新手，尝试通过NgRx调用服务的Post方法，传入booking对象却收到报错，提示传入了空对象。在Redux DevTools的Action区域可以看到该对象，同时注意到对象新增了一个type属性。

错误信息 #

{
    "": [
        "A non-empty request body is required."
    ],
    "booking": [
        "The booking field is required."
    ]
}

相关代码 #

booking.action.ts #

export const addBooking = createAction(
    '[Booking API] Add booking',
    props<{ booking: Booking}>()
)

export const addBookingSuccess = createAction(
    '[Booking API] Add booking success',
    props<{ booking: Booking}>()
);

booking.reducer.ts #

export const bookingReducer = createReducer(
    // 初始状态
    initialState,
    // 触发加载预订列表
    on(loadBookings, (state) => ({ ...state, status: 'loading' as const })),
    on(loadBookingsSuccess, (state, { bookings }) => ({
        ...state,
        bookings: bookings,
        error: '',
        status: 'success' as const,
    })),
    on(addBooking, (state) => ({ ...state, status: 'loading' as const })),
    on(addBookingSuccess, (state, { booking }) => ({
        ...state,
        bookings: [...state.bookings, booking],
        error: '',
        status: 'success' as const,
    }))
)

booking.effects.ts #

addBooking$ = createEffect(() =>
        this.actions$.pipe(
            ofType(BookingActions.addBooking),
            switchMap((action) =>
                from(this.bookingService.postBooking(action.booking)).pipe(
                    map((booking) =>                     
                        BookingActions.addBookingSuccess({ booking: booking}))
                )
            )
        )
    )

booking.selector.ts #

export const featureKey = 'bookings';

export const selectFeature = createFeatureSelector<AppState>(featureKey);

export const selectFeatureLoadBookings = createSelector(
  selectFeature,
  (state: AppState) => state.bookings
);

export const selectFeatureAddBookings = createSelector(
  selectFeature,
  (state: AppState) => state.bookings
)

调用dispatch的代码 #

this.store.dispatch(addBooking(this.newBooking));

Redux DevTools截图 #

解决方案 #

问题根源在dispatch的调用方式上：

你定义的addBooking Action通过props<{ booking: Booking }>声明，要求传入一个包含booking属性的对象，但当前代码直接把this.newBooking作为参数传入，导致Action的结构不符合预期——此时action.booking会是undefined，最终Post请求发送了空对象。

修改dispatch代码为：

this.store.dispatch(addBooking({ booking: this.newBooking }));

修改后，Effects中action.booking就能正确获取到你要传递的预订对象，Post请求的body就不会为空了。

另外说明：Redux DevTools中Action的type属性是NgRx自动添加的，属于正常机制，不会影响数据传递。

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