Redirect Benutzer mit React-Router 4 und Redux-Promise

Question

Ich habe einen einfachen Anwendungsfall, der innerhalb der React-Router 4 und Redux-Umgebung ziemlich schwierig zu erreichen scheint.

Wenn sich ein Benutzer anmeldet, wird eine reduktive Versprechensaktion ausgelöst, die ein API-Token, Ablaufdatum und einige andere Informationen zurückgibt. Wenn und wenn das Versprechen erfüllt ist, möchte ich dann den Benutzer auf eine andere Seite umleiten.

Ich kann nicht herausfinden, wie ein Benutzer programmgesteuert mit der obigen Architektur umleiten. Ich möchte es in Action.js machen, aber es scheint, dass es nur in Reducers.js gemacht werden kann. Obwohl ich nicht sicher bin, wie ich anfangen soll.

Der beste Weg, den ich bisher gefunden habe, ist eine Redirect-Komponente in meiner Ansicht zu haben, und die Verheißung setzen den Status eingeloggt auf true, wenn die geloggte in der Ansicht wahr ist, wird es dann die Umleitung prop zurückkehren dann leiten Sie den Benutzer auf die gewünschte Seite um. Irgendwie fühlt sich das wie viel zusätzlicher Code für einen einfachen Anwendungsfall an.

Jeder Rat wäre hilfreich. Vielen Dank.

Action.js:

import axios from 'axios'; 

export function login(email, password) { 
    return { 
    type: 'LOGIN_USER', 
    payload: axios.post('http://localhost:3114/api/users/authenticate', 
    { 
     email, 
     password, 
    }), 
    }; 
} 

Reducers.js

// Promise 
// pending 
// fulfilled 
// rejected 
const initalState = { 
    token: null, 
    expiryDate: '', 
    loading: false, 
    error: null, 
}; 

// REDCUER 
function loginReducer(state = initalState, action) { 
    switch (action.type) { 
    case 'LOGIN_USER_PENDING': 
     return { ...state, loading: true }; 
    case 'LOGIN_USER_FULFILLED': 
     return { 
     ...state, 
     loading: false, 
     token: action.payload.data.token, 
     expiryDate: action.payload.data.expires, 
     loggedIn: true, 
     }; 
    case 'LOGIN_USER_REJECTED': 
     return { ...state, loading: false, error: `${action.payload}` }; 
    default: 
     return state; 
    } 
} 

export default loginReducer; 

LoginView.js

render() { 
     const { data, login, loggedIn } = this.props; 
     if (data.loggedIn) { 
      return <Redirect to="/users" push />; 
     } 
     return (
      ... 
     ) 
     } 

Grüße, Emir

Answer 1

ich einensehen konnteim Redux-Status möglicherweise zu einem späteren Zeitpunkt nützlich sein (z. B. können Sie alle Routen/Seiten umbrechen, die nur für angemeldete Benutzer in einer Komponente sichtbar sein sollten, die diese isLoggedIn überprüft und möglicherweise zur Anmeldeseite weiterleitet) Ich würde dort nicht unbedingt etwas ändern.

Aber wenn Sie immer noch einen anderen Weg finden möchten, dann ist es möglich, mit history.push(newUrl) or history.replace(newUrl) programmatisch (ohne Rendern einer Redirect-Komponente) umleiten. Aber ich bin mir nicht sicher, wo du es nennen würdest. Nebenwirkungen im Aktions Schöpfer zu haben scheint etwas weniger seltsam für mich, im Vergleich zu in dem Minderer mit, so eine Möglichkeit wäre vielleicht so etwas wie

import axios from 'axios'; 

// pushOnResolve would be something like() => push('mynew/url') 
export function login(email, password, pushOnResolve) { 
    const promise = axios.post('http://localhost:3114/api/users/authenticate'; 
    // it's possible to have several .then on a promise 
    // so this shouldn't interfere with 
    // the Redux-promise or the LOGIN_USER_FULFILLED reducer 
    promise.then(pushOnResolve); 

    return { 
    type: 'LOGIN_USER', 
    payload: promise, 
    { 
     email, 
     password, 
    }), 
    }; 
}