Переадресация при использовании 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:
        }
    }
};

Ответы (0 шт):