Переадресация при использовании React + Redux
Подключен react-router-dom + redux + middleware Redux Thunk. Имеется страница index, она при загрузке вызывает метод запроса данных к серверу. Этот метод реализован в виде асинхронной функции, которая передается в dispatch (и которую собственно перехватывает для выполнения Redux Thunk).
В ходе выполнения асинхронной функции запроса данных, если возникли ошибки, выполняется редирект на страницы 404/500. Реализация этой части функции такая: как известно, каждый компонент, для которого реализован роутинг, получает props с соответствующими полями (match, location, history), у меня потом эти же props передаются в асинхронный action как аргумент и таким образом уже в нем доступны возможности перенаправления через history.push/go/etc.
Проблема в том, что тут есть привязка к тому, что компонент обязан иметь данные props в принципе. Это конечно можно решить через пробрасывание props нужному компоненту или использование withRouter для него. Еще я нашел старое решение с импортом history из одноименного пакета прямо в файл с нужным action, но при данном методе у меня хоть и меняется путь в адресной строке, но самого перехода нет.
Собственно я хочу понять, может я вообще пытаюсь засунуть редирект туда, где ему быть не положено и отсюда все проблемы? Где вообще лучше реализовывать такие вещи, если выполняешь запросы к серверу в рамках асинхронных actions/middlware? Буду благодарен за указание направление поиска, статьи по теме, в каком направлении гуглить.
// MainPage.js
class MainPage extends PureComponent {
componentDidMount() {
this.props.fetchData(this.props);
}
render() {
const SpinnerModal = withModal(Spinner, { bg: false, interactionsDisabled: true });
if (!this.props.index) return <SpinnerModal/>;
return (
<>
<Promo index={this.props.index}/>
</>
);
}
}
const mapDispatchToProps = (dispatch) => bindActionCreators(serverActions, dispatch);
export default connect(null, mapDispatchToProps)(MainPage);
// redux/server/actions.js
export const fetchData = (props) => async (dispatch, getState, api) => {
try {
const response = await api.get(props.uri);
dispatch({
type: types.SERVER_FETCH_PAGE_DATA,
payload: { data: response.data },
});
} catch (error) {
switch (error.status) {
case 404: {
props.history.push("/404");
break;
}
case 500: {
props.history.push("/500");
break;
}
default:
}
}
};