reactjs - 监听组件中的某些 redux 操作

Question

有没有办法使用redux-thunk中间件来监听组件中的某些操作？还是我真的需要使用redux-saga或redux-observable其他东西来实现这一目标？

这是我的 redux-thunk 异步操作，我只是想在TICKET_CREATE_SUCCESS发送操作后关闭对话框

export const createTicketEffects = (ticket: Ticket): ThunkAction<void, RootState, unknown, Action<string>> => {
    return async (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
        dispatch(TicketActions.createTicket(ticket));
        return await TicketService.create(ticket)
            .then(({ data }) => {
                dispatch(TicketActions.createTicketSuccess(data.data, data.message));
            })
            .catch((error) => dispatch(TicketActions.createTicketError(error)));
    };
};

谢谢

标签： reactjsreduxredux-thunk

Answer 1

不是在你问的意义上，不。组件不能“监听分派的动作”。

但是，thunk 可以返回一个承诺，您可以等待该承诺从以下位置返回dispatch(someThunk())：

• https://redux.js.org/tutorials/essentials/part-5-async-logic#checking-thunk-results-in-components
• https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#thunks-and-promises

另外，请注意，您可以使用 Redux Toolkit 的createAsyncThunkAPI 简化该 thunk：

const createTicketEffects = createAsyncThunk(
  'tickets/createTickets',
  async (ticket: Ticket) => {
    const response = await TicketService.create(ticket);
    return res.data; // example: not sure what you're doing with `res.message`
  }
)