Upgrading to React Router v6 and removed connected-react-router so now I'm needing a different way to navigate to a URL once a saga completes. We used to dispatch using connected-react-router with history.push() but we now need a way to use the useNavigate() hook instead.
I can set up my sagas to return a Promise and use a .then() within my components in some places, but in others that won't work.
We have sagas checking for multiple statuses and the navigate only needs to trigger on one or two of the status values. It seems like there should be a better way to use the useNavigate() hook without having to pass it in with each action that's dispatched to update the status.
Is there some way to allow useNavigate() to be available globally? Here's an example where I can't use the useNavigate() hook and don't necessarily want to pass it in as a function either.
// 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"
}
};
Ideally I would probably want to separate out concerns, actions, and routes to avoid this problem, but a large chunk of the app I'm working on has already been written "toggling" on these statuses within the same route so I'm trying to figure out a good workaround.
