Reactjs перенаправить из действия

Question

Я пытаюсь реализовать версию 4. Реактивный маршрутизатор. Найдите минимальный код, который у меня сейчас есть, как показано ниже:

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';

export default () => (
    <BrowserRouter>
        <div>
            <div className="col-xs-12 col-sm-6 col-md-12">
                <header className="App-header">
                    <h1 className="App-title">TestUsers</h1>
                </header>
                <Menu>
                    <MenuItem>
                        <Link to="/users">Users</Link>
                    </MenuItem>
                    <MenuItem>
                        Shelves
                        </MenuItem>
                    <MenuItem>
                        Products
                    </MenuItem>
                </Menu>
            </div>
            <Switch>
                <Route exact path="/users" component={Users} />
                <Route exact path="/users/add" component={Users} />
                <Route exact path="/users/:id" component={Users} />
            </Switch>
        </div>
    </BrowserRouter>
)

Мне удалось успешно добавить пользователя. Я хочу перенаправить на страницу списка пользователей из действия, которое добавляет пользователя. Пожалуйста, найдите код действия ниже:

export function addUser(objData) {
    return function (dispatch) {
        axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                // TODO: programmatically redirect using react-router v4
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

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

Спасибо

Answer 1

Вы можете использовать Обратный звонок

export function addUser(objData, onSuccess, onFail) {
    return function (dispatch) {
        return axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                onSuccess()
            })
            .catch((error) => {
                //you can handle error on your component
                onFail(error);
            });
    }
}

Тогда вызовите addUser как этот компонент.

addUser(
   objData,
   () => this.props.history.push('/your-user-list-component'),
   () => {// handle the error here.}
)

Answer 2

В реакции-маршрутизаторе 4 был добавлен компонент <Redirect />, который возвращается методом render() для достижения того, что вам нужно. Компонент перенаправления также импортируется из react-router-dom, поэтому: import { BrowserRouter, Route, Link, Redirect } from 'react-router-dom';

class MyComponent extends React.Component {
  state = {
    redirect: false
  }

  handleSubmit () {
    axios.post(/**/)
      .then(() => this.setState({ redirect: true }));
  }

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

     if (redirect) {
       return <Redirect to='/somewhere'/>;
     }

     return <RenderYourForm/>;
}

Answer 3

использование this.props.history.push('/some/path') после отправки

Я бы также посоветовал вам проверить, равен ли response.status 200

Answer 4

Вы можете использовать модуль истории.

Создать файл history.js

//history.js
import createHistory from 'history/createHashHistory'
export default createHistory()

Обновите ваш роутер с новой историей. Вам нужно использовать Router вместо BrowserRouter.

import React from 'react';
import { Router, Route, Link } from 'react-router-dom';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';
import { Switch } from 'react-router-dom';
import history from './history';

export default () => (
    <Router history={history}>
       ...
    </Router>
);

А теперь вы можете перемещаться программно.

import history from './history'
export function addUser(objData) {
    return function (dispatch) {
        axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                // TODO: programmatically redirect using react-router v4
               history.push(path)
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

Answer 5

вы можете вернуть Promise из ваших действий:

export function addUser(objData) {
    return function (dispatch) {
        return axios.post(
            'http://localhost:4000/api/v1/users',
            {
                'name': objData.name,
                'email': objData.email
            }
        )
            .then((response) => {
                dispatch({ 'type': ADD_USER, 'payload': true });
                // TODO: programmatically redirect using react-router v4
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

затем в компоненте:

componentDidMount(){
  this.props.addUser(objData).then(() => {
    this.props.history.push('/somwhere')
  })
}