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

Question

我正在使用redux-saga的React-router-v4。我的问题是一旦用户登录，我想把他重定向到主页，所以从答案提到的here与{withRouter}我尝试，但它不起作用，有人能让我知道我应该如何做redux-saga我看到了答案here这是唯一的方法吗？

下面是我的redux saga代码

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模块，去掉了所有多余的部分。

​

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

​

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

​

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

​

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