2017-09-19 7 views
0

redux-saga와 함께 React-router-v4를 사용하고 있습니다. 내 문제는 한 번 사용자가 로그인 한 번입니다. 응답 페이지에서 예를 들어 here{withRouter}으로 리디렉션하고 싶습니다. 시도했지만 작동하지 않았습니다. 내게 redux-saga로 어떻게해야하는지 알려주세요. 대답 here이 유일한 방법입니까?사용자 로그인 후 집으로 이동하는 방법 redux-saga와 함께 react-router-v4

아래 나는 간단한 REDUX 미들웨어를 사용하여이 문제를 해결 얻을 내 REDUX 사가 코드

import { takeLatest } from 'redux-saga'; 
import {LOG_IN,LOG_INS,LOG_IN_ERROR} from '../constants/actionTypes'; 
import { call, put } from 'redux-saga/effects'; 
import {withRouter} from 'react-router'; 
import {login} from '../services/loginApi' 


import { fetchScenario } from '../services/scenarioApi'; 
export default function* watchLogin() { 
    yield takeLatest(LOG_IN, loginSaga); 
} 
function* loginSaga(data) { 
     try { 
console.log("obj in sagas",data) 
    const logInData = yield call(login,data.obj); 
    yield [put({ type:LOG_INS , logInData })]; 

    this.props.history.push('/home') 
}catch(error){ 
     yield put({type: LOG_IN_ERROR, error: error.message}) 

    return false 
} 
} 

답변

0

입니다.

기본적으로 로그인 성공 조치가 실행되는 것을 감시하고 홈 페이지로 리디렉션을 푸시하는 보너스로 react-notification-system-redux을 사용하여 경고가 표시됩니다.

내 여분의 모든 비트가 삭감 된 내 사용자 redux 모듈입니다. 여기

... 
 
export const LOGIN_SUCCESS = 'southwarklovesdogs/user/LOGIN_SUCCESS'; 
 
... 
 
const userPrefix = '/users'; 
 

 
const initialState = { 
 
    logged_in: false, 
 
    loading: false, 
 
    email: '', 
 
    password: '', 
 
    code: '', 
 
    confirmed: false, 
 
    confirm_failed: false, 
 
    register_error: false, 
 
    login_error: false, 
 
    error: false, 
 
    session: false, 
 
    credentials: false, 
 
    tested: false, 
 
    test_result: false 
 
}; 
 

 
export default function reducer(state = initialState, action = {}) { 
 
    switch (action.type) { 
 
    ... 
 
    case LOGIN_SUCCESS: 
 
     return { 
 
     ...state, 
 
     logged_in: false, 
 
     loading: false, 
 
     login_error: false, 
 
     error: false, 
 
     session: action.result.session, 
 
     credentials: action.result.credentials 
 
     }; 
 
    ... 
 
    default: 
 
     return state; 
 
    } 
 
} 
 

 

 
export function login(email, password) { 
 
    return { 
 
    types: [LOGIN, LOGIN_SUCCESS, LOGIN_FAIL], 
 
    cognito: cognito_client => cognito_client.login(email, password) 
 
    }; 
 
}

모든 사용자 로그인 부작용 전체의 미들웨어이다.

REDUX 미들웨어 문서

import { REGISTER_SUCCESS, 
 
      CONFIRM_SUCCESS, 
 
      LOGIN_SUCCESS, 
 
      GET_USER_SUCCESS, 
 
      LOGOUT_SUCCESS, 
 
      FORGOT_PASSWORD_SUCCESS, 
 
      CONFIRM_PASSWORD_SUCCESS, 
 
      refresh 
 
} from '../modules/user'; 
 
import { push } from 'react-router-redux' 
 
import { success, info } from 'react-notification-system-redux'; 
 

 

 
export default function userMiddleware() { 
 
    return ({ dispatch, getState }) => { 
 
    return next => action => { 
 
     if (action.type === REGISTER_SUCCESS) { 
 
     dispatch(push('/user/confirm')) 
 
     dispatch(info({ 
 
      title: 'Registered', 
 
      message: 'We have just sent you an email with a verification code.' 
 
     })) 
 
     } else if (action.type === CONFIRM_SUCCESS) { 
 
     dispatch(refresh()) 
 
     dispatch(push('/')) 
 
     dispatch(success({ 
 
      title: 'Comfirmed and Logged In', 
 
      message: 'Your email address has been confirmed and you have been logged in.' 
 
     })) 
 
     } else if (action.type === LOGIN_SUCCESS) { 
 
     dispatch(refresh()) 
 
     dispatch(push('/')) 
 
     dispatch(success({ 
 
      title: 'Logged In', 
 
      message: 'You have succsessfully logged in.' 
 
     })) 
 
     } else if (action.type === GET_USER_SUCCESS) { 
 
     if (action.result.credentials && action.result.credentials.expired) { 
 
      dispatch(refresh()) 
 
     } 
 
     } else if (action.type === LOGOUT_SUCCESS) { 
 
     dispatch(info({ 
 
      title: 'Logged out', 
 
      message: 'You have succsessfully logged out' 
 
     })) 
 
     } else if (action.type === FORGOT_PASSWORD_SUCCESS) { 
 
     dispatch(push('/user/confirm_password')) 
 
     dispatch(info({ 
 
      title: 'Password reset code sent', 
 
      message: 'We have emailed you a password reset code.' 
 
     })) 
 
     } else if (action.type === CONFIRM_PASSWORD_SUCCESS) { 
 
     dispatch(push('/user/login')) 
 
     dispatch(success({ 
 
      title: 'Password reset complete', 
 
      message: 'Password has been reset, you can now log in.' 
 
     })) 
 
     } 
 
     return next(action); 
 
    }; 
 
    }; 
 
}

여기 enter link description here하지만 개인적으로, 나는 그들이 열심히 읽고 이해하는 것으로.

+0

우리는 react-router-dom에 아무 것도 가지고 있지 않습니까? 기본적으로 가능한 경우에만 추가 종속성을 피하고 싶습니다 .2 사례를 추가해야합니다. – LowCool

+0

@LowCool, 내 생각이지만, 모든 프로젝트에서 의미있는 크기라면 사용자를 리디렉션하는 것 이외의 부작용을 처리하기위한 간단한 시스템이 필요합니다. 필자의 경우에는 모든 요구 사항을 처리 할 수있는 미들웨어가 있으며 Redux Saga는 과잉입니다. –