Переадресация URL в действии Redux с помощью React & React Router на стороне сервера v4 - PullRequest
Новая
       41

Переадресация URL в действии Redux с помощью React & React Router на стороне сервера v4

0 голосов
/ 15 мая 2018

Я долго пытался выяснить, как лучше всего обработать перенаправление для отреагированного приложения на стороне сервера, используя response-router v4 и redux.

Мое приложение извлекает данные изAPI - иногда API отвечает таким образом, что мне нужно автоматически перенаправить пользователя на другой URL.

1 Ответ

0 голосов
/ 15 мая 2018

Если API отвечает таким образом, что мне нужно перенаправить, я сохраняю путь, на который должен быть направлен пользователь, в хранилище с избыточностью.(Мой API возвращает объект ошибки с переменной «redirect», которую я могу найти в моем файле маршрутов для вставки в хранилище в качестве пути перенаправления).

Важно, что это просто сохранение пути в хранилище приставок.

case (typeof error["redirect"] !== "undefined" && error["redirect"] !== null): {
    dispatch({
        type: RENDER_REDIRECT,
        payload: routes[error["redirect"]]
    });
    break;
}

У меня есть компонент под названием «RenderRedirect», этот компонент всегда отображается в основном приложении, но выполняет специальное действие, если this.props показывает перенаправление как «ноль» иnextProps перенаправить как! null.

Это означает, что перенаправление было инициировано.

Он использует history.push для изменения URL, а затем очищает перенаправление из хранилища, используя другое действие.

Это работает особенно хорошо, потому что мне не нужно беспокоиться о сервере.ошибка при рендеринге на стороне, потому что эта ситуация может произойти только на стороне клиента.

В любое время, когда мне нужно инициировать перенаправление, я могу легко отправить вышеуказанное действие с путем в качестве полезной нагрузки.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from "react-router-dom";
import { clearRedirect } from '../../../actions';

class RenderRedirect extends Component {

    componentWillReceiveProps(nextProps) {
        // Detect redirect, perform redirect, clear redirect
        const { redirect, history, clearRedirectAction } = this.props;

        // Detect redirect
        if(redirect === null && nextProps.redirect !== null) {
            history.push(nextProps.redirect);
            clearRedirectAction();
        }
    }

    render() {
        const { redirect } = this.props;

        if (redirect !== null) {
            return (
                <div>
                    <p className={"profile-instructions"}>Redirecting...</p>
                </div>
            )
        } else {
            return null;
        }
    }
}

const mapStateToProps = (state) => ({
    redirect: state.redirect
})

const mapDispatchToProps = (dispatch) => ({
    clearRedirectAction: () => dispatch(clearRedirect())
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RenderRedirect));
...