2017-09-19 31 views
0

私はredux-sagaでReact-router-v4を使用しています。私の問題は、一度ユーザーがログインしていると私は彼をホームページにリダイレクトしたいと答えているのでhere{withRouter}私は試みましたが、うまくいきませんでした、誰も私に還元兵とどのようにすべきか教えてください答え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を使用して警告をポップアップするミドルウェアがあります。

ここでは余分なビットがすべて削除された私のユーザー還元モジュールです。ここで

... 
 
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に何も持っていませんでしたか?基本的には、可能ならば余分な依存関係を避けたいだけです。 – LowCool

+0

@LowCoolを追加する必要があります。意味のあるサイズでは、ユーザーをリダイレクトするだけではなく、副作用を処理するためのシンプルなシステムが必要になります。私のケースでは、すべてのニーズを簡単に処理できるミドルウェアがあり、Redux Sagaは過剰です。 –

関連する問題