如何等待并收到 Redux Saga 的通知以在 Redux Store（例如 React Component）之外完成成功或错误操作

Question

上下文

我是新开发者。在我的 React Typescript 项目中，我第一次尝试使用 Redux Sagas。

问题

在我的 React 项目中，用户将填写表单并提交。此提交被调度以使用 Redux Saga 启动 API 调用。请求完成并显示 SUCCESS/FAILURE 后，我需要适当地更新 React 组件或使用

useNavigate()

将用户导航到另一个页面。

塞纳里奥

此功能我有 3 种操作类型：

CREATE_TODO_START
CREATE_TODO_SUCCESS
CREATE_TODO_FAILURE

应用程序的用户可以使用表单创建 TODO 项目。

提交表单后，

onFinish

功能被触发：

const onFinish = (newTodo: NewTodoRequest) => {
   // I defined const dispatch = useDispatch()
   dispatch(createTodoStart(newTodo))
}

用户发送请求后，启动我的Saga：

function* newTodo({payload}: NewTodoStart) {
    try {
        const {data} = yield* call(createTodo, payload);
        yield* put(createTodoSuccess(data));
    } catch (error) {
        yield* put(createTodoFailure(error as Error));
    }
}

这些 put 函数将相应地更新我的

todoReducer

：

export type TodoReducer = {
    readonly todos: Todo[],
    readonly isLoading: boolean,
    readonly error: Error | null
}

在

CREATE_TODO_SUCCESS

或

CREATE_TODO_FAILURE

调用并完成后，我需要将我的反应组件更新为：将用户导航到他们的 TODO 仪表板或向用户显示无法为其创建 TODO 的错误消息不管什么原因。

如果有人对如何等待

CREATE_TODO_SUCCESS

或

CREATE_TODO_FAILURE

在 Redux 商店（例如 React Component）之外完成有任何建议，将不胜感激。

我试过使用

useEffect

挂钩。通常等待

isLoading

作为

useEffect

依赖项完成并从

error

中选择

todoReducer

会起作用，但也会显示从以前的请求或其他使用

todoReducer

的请求中存储的错误。根据现有数组的更改导航用户 (

todo[]

) 有时会错误地触发。