带有 React Router v6 useNavigate Hook 的 Redux Sagas

Question

升级到 React Router v6 并删除了 connected-react-router 所以现在我需要一种不同的方式来在 saga 完成后导航到 URL。我们曾经使用dispatch使用connected-react-router和history.push()但我们现在需要一种方法来使用useNavigate()挂钩。

我可以设置我的 sagas 以返回 Promise 并在我的组件中的某些地方使用 .then()，但在其他地方不起作用。

我们有 sagas 检查多个状态，导航只需要触发一个或两个状态值。似乎应该有更好的方法来使用 useNavigate() 挂钩，而不必将它传递给每个为更新状态而分派的操作。

有没有办法让useNavigate()在全球范围内可用？这是一个示例，其中我不能使用 useNavigate() 挂钩并且也不一定想将其作为函数传递。

// Saga
function* watchStatus(
    action: ActionType<typeof startActions.changeStatus>
): SagaIterator {
    if (action.payload.status === "END_CREATE") {
        const data: ReturnType<typeof getDataRequest> = yield select(
            getDataRequest
        );
    } else if (action.payload.status === "END_VIEW") {
        // HERE IS WHERE I WOULD NEED TO NAVIGATE TO A NEW ROUTE
    }
}

// State transition logic
export const statusChanges: {
    [S in Status]: {
        readonly onNext: (state: RootState) => StartStatus;
    };
} = {
    FEE_ESTIMATE: {
        onNext: () => "END_CREATE"
    },
    END_VIEW_REPORT: {
        onNext: () => "END_VIEW"
    }
};

理想情况下，我可能希望将关注点、操作和路线分开来避免这个问题，但是我正在处理的应用程序的很大一部分已经在同一条路线中对这些状态进行了“切换”，所以我正在尝试找出一个好的解决方法。

Answer 1

我最终使用 redux-first-history 替代了 connected-react-router，而切换到使用 useNavigate 挂钩没有任何意义。