React-Router 4 및 Redux-Promise를 사용하여 사용자 리디렉션

Question

React-Router 4 및 Redux 환경에서 구현하기가 쉬운 간단한 사용 사례가 있습니다.

사용자가 로그인하면 API 토큰, 만료일 및 기타 정보를 반환하는 약정 약속 액션이 실행 중지됩니다. 언제 약속이 이루어지면 사용자를 다른 페이지로 리디렉션하고 싶습니다.

위 아키텍처를 사용하여 프로그래밍 방식으로 사용자를 리디렉션하는 방법을 알아낼 수 없습니다. Action.js에서 해보고 싶지만 Reducers.js에서만 수행 할 수 있다고 느낍니다. 비록 내가 시작하는 방법조차 모르겠다.

가장 좋은 방법은 내보기에서 리디렉션 구성 요소를 사용하고 loggedIn 상태가 true로 설정된 약속을 설정하는 것입니다. loggedIn prop가 뷰에 true이면 해당 리디렉션 소품이 반환됩니다. 그런 다음 사용자를 원하는 페이지로 리디렉션하십시오. 어쨌든 이것은 간단한 유스 케이스를위한 많은 여분의 코드처럼 느껴진다.

조언이 도움이 될 것입니다. 고맙습니다.

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 (
      ... 
     ) 
     } 

감사합니다, 에미 르

가

Answer 1

나는를 볼 수 있었다 Redux 상태의은 이후에 유용 할 수 있습니다 (예를 들어, isLoggedIn을 확인하고 로그인 페이지로 리디렉션되는 구성 요소에 로그인 한 사용자 만 볼 수있는 모든 경로/페이지를 감쌀 수 있습니다). 나는 거기에 아무것도 바꿀 필요가 없다.

그러나이 경우에도 다른 방법을 찾으려면 history.push(newUrl) or history.replace(newUrl)을 사용하여 프로그래밍 방식으로 리디렉션 할 수 있습니다 (리디렉션 구성 요소를 렌더링하지 않음). 그러나 나는 당신이 그것을 어디에서 부를 것인지 확신하지 못합니다. 내가 제안처럼 행동 작성자의 부작용을 갖는 것은 나에게 약간 덜 이상한 것 같다, 감속기에 데에 비해, 그래서 하나의 가능성은 아마도 history.push``와

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, 
    }), 
    }; 
}