how to navigate to home after user login react-router-v4 with redux-saga

Question

I am using React-router-v4 with redux-saga. my problem is once user is logged in I want to redirect him to home page so from the answer mentioned here with {withRouter} I tried but it didn't work, can anyone please let me know how should I do with redux-saga I saw the answer here is this the only way?

below is my redux saga code

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

I get around this issue using a simple redux middleware.

Basically, I have middleware that watches for the login success action being fired and pushes a redirect to the home page and as a bonus pops up an alert using react-notification-system-redux.

Here is my user redux module with all the extra bits cut out.

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

Here is the middleware in full for all user login side effects.

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

The redux middleware docs are here enter link description here but personally, I found them very hard to read and understand.