Question

我正在使用React-router-v4和redux-saga。我的问题是，一旦用户登录，我想将他重定向到主页，所以从here提到{withRouter}的答案，我试过但它没有工作，任何人都可以让我知道如何我应该如何处理redux-saga我看到答案here这是唯一的方法吗？

下面是我的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
}
}

Answer 1

我使用简单的redux中间件解决了这个问题。

基本上，我有中间件监视正在触发的登录成功操作并将重定向推送到主页，并使用react-notification-system-redux弹出警报。

这是我的用户redux模块，其中删除了所有额外的位。

＆＃13;

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

＆＃13;

以下是所有用户登录副作用的完整中间件。

＆＃13;

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

＆＃13;

redux中间件文档在enter link description here，但就个人而言，我发现它们很难阅读和理解。

用户使用redux-saga登录react-router-v4后如何导航到主页

1 个答案: