React-Reduxプロジェクトでauthのサーバレスポンス200を受信した後にページにリダイレクト

Question

本当に、過去数日間これに苦しんでいます。 react-router v2プロジェクトをreact-router-dom v4に変換しています。

もともとリダイレクトを使用すると、「実験的」であると実際にサポートされていませんので、あなたがwithRouteと、コンポーネント/コンテナでそれを行うことになっているコンテキストを作成しない限り、もはやreact-router-dom v4で動作browserHistory.push('/home');と./actions/index.jsで行われました。少なくとも、コンポーネントファイル/コンテナではなく、アクションファイルでリダイレクトしたい場合は、これが私の理解です。

とにかく、新生であることはしばらくしています。ほとんどのチュートリアルでは、サーバーレスポンスを待っていることを考慮していないため、リダイレクトがどこにあるのか分かりません。

私は現在、リダイレクトするために2回提出する必要があります：1）PUT認証APIへの資格情報。 2）localStorageに保存された応答を取得し、それを使用してリダイレクトを検証します。

これを行う正しい方法は何ですか？

ありがとうございます！

// ./containers/authentication/signin.js 

import React, { Component } from 'react'; 
import { reduxForm, Field } from 'redux-form'; 
import { connect } from 'react-redux'; 
import { withRouter } from 'react-router-dom'; 
import { signinUser, authError } from '../../actions/authentication'; 

const renderInput = field => { 
    const { input, type } = field; 
    return (
     <div> 
      <input {...input} type={type} className='form-control' /> 
     </div> 
    ); 
} 

class Signin extends Component { 
    handleFormSubmit({ username, password }) { 
     this.props.signinUser({ username, password }); 
     if (localStorage.getItem('status') === '200') { 
      this.props.history.push('/home'); 
     } 
    } 

    renderAlert() { 
     if (this.props.errorMessage) { 
      return (
       <div className="alert alert-danger"> 
        <strong>Oops!</strong> {this.props.errorMessage} 
       </div> 
      ); 
     } 
    } 

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

     return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <div className="form-group"> 
        <label>Username:</label> 
        <Field name='username' type='username' component={renderInput} /> 
       </div> 
       <div className="form-group"> 
        <label>Password:</label> 
        <Field name='password' type='password' component={renderInput} /> 
       </div> 
       {this.renderAlert()} 
       <button action="submit" className="btn btn-primary">Sign in</button> 
      </form> 

     ); 
    } 
} 

function mapStateToProps(state) { 
    return { errorMessage: state.auth.error }; 
} 

Signin = connect(mapStateToProps, { signinUser, authError })(Signin); 
Signin = reduxForm({ 
    form: 'signin' 
})(Signin); 
export default withRouter(Signin); 

---

// ./actions/authentication/index.js 

import axios from 'axios'; 
import { ROOT_URL } from '../../../config/settings/secrets.json'; 

export const AUTH_USER = 'auth_user'; 
export const UNAUTH_USER = 'unauth_user'; 
export const AUTH_ERROR = 'auth_error'; 

export function signinUser({ username, password }) { 
    return function(dispatch) { 
     axios.post(`${ROOT_URL}/api/auth/token/`, { username, password }) 
      .then(response => { 
      dispatch({ type: AUTH_USER }); 
      localStorage.setItem('token', response.data.token); 
      localStorage.setItem('status', response.status);    
      }) 
      .catch(error => { 
      console.log(error); 
      dispatch(authError('Bad Login Info')); 
     }); 
    } 
} 

export function authError(error) { 
    return { 
     type: AUTH_ERROR, 
     payload: error 
    }; 
} 

export function signoutUser() { 
    localStorage.removeItem('token'); 
    return { type: UNAUTH_USER }; 
} 

Answer 1

あなたはpush、replaceと同様の作用を派遣するreact-router-reduxを使用することができます。ここでは

はコードです。ここにはother docsへのリンクがあります（少し古いですが、APIについての詳細はあります）