Redirect to a specific page after successful action - Redux saga

I have a user profile page where the user can update the data. Once the data is submitted, it should be redirected to dashboard page.

MyProfile.js

  handleProfileUpdate = () => {
    let user = this.state;
    this.props.updateUserProfile(user);
  }

Action is defined as follows

export const updateUserProfile = (obj) => ({
  type: types.USER_PROFILE_UPDATE_REQUEST,
  payload: obj
});

Saga file is defined as follows.

function* updateUserProfile(action) {
  try {
    let data = action.payload;
    yield call(userProvider.updateUserProfile, data);

    // dispatch a success action to the store
    yield put({ type: types.USER_PROFILE_UPDATE_SUCCESS, data });
    yield put(push('/dashboard'));
    yield put(constants.successMsg(userProfileUpdateSuccess));

  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put(constants.DEFAULT_ERROR_MSG);
  }
}

export function* watchUserProfileUpdateRequest() {
  yield takeLatest(types.USER_PROFILE_UPDATE_REQUEST, updateUserProfile);
}


export default function* userSaga() {
  yield all([
    watchUserProfileRequest(),
    watchUserProfileUpdateRequest()
  ]);
}

But the code yield put(push('/dashboard')) is not redirecting on to the page.

Any idea on how to fix this?

I founded a solution myself

history.js

import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export default history;

Import history file into the saga

import history from '../../history';

Modify the watcher saga as follows.

function* updateUserProfile(action) {
  try {
    let data = action.payload;
    yield call(userProvider.updateUserProfile, data);

    // dispatch a success action to the store
    yield put({ type: types.USER_PROFILE_UPDATE_SUCCESS, data });
    yield call(forwardTo, '/dashboard');
    yield put(constants.successMsg(userProfileUpdateSuccess));

  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put(constants.DEFAULT_ERROR_MSG);
  }
}

Now, you need to define the forwardTo function as follows.

function forwardTo(location) {
  history.push(location);
}

Can we redirect to in reduxSaga, saga.js try{//call api //put login success <Redirect to="/app"/> }. index.js saga.js import { push } from 'react-router-redux'; // after API call & validate user yield actions/auth"; export function* userLogin(loginData) { const payLoad history. push('/posts'); // Redirect to Post Page } catch (err) { yield� In this guide, we are going to learn how to redirect when there's a successful async action. There are several ways to redirect a user to another route, including the history.push () method and the <Redirect /> component from react-router. In this guide, we will use a Redux action to redirect the user using the <Redirect /> component.

You need the history object to push to a different path.

  1. If you can pass the history object in your action you can directly write history.push('/dashboard').
  2. You pass a callback function in the action from where the action was called and call that callback function with yield put(callback()) so that you can redirect with the same command as mentioned in point 1.
  3. window.location.href = 'dashboard';

Changing React Route Programmatically with Redux-Saga, Changing React Route Programmatically with Redux-Saga a web app you've got a workflow that calls for a route change after a user action. you'd like to redirect the user to a another page upon successful transmission. Redux-Saga. Sometimes in a web app you've got a workflow that calls for a route change after a user action. For example, suppose the user has to complete a form and click a button. The data is sent to the server via AJAX and then you'd like to redirect the user to a another page upon successful transmission.

This is a simple example of what I've been doing, and the only way I found to make this work: (typescript with sagas)

MyCreateUserComponent.tsx

onHandleDelete() {
  const { push } = this.props.history

  const meta: ISagaActionMeta = {
    redirect: push,
    path: '/users'
  }

  // call Actioncreator
  DeleteUser(userId, meta)
}

actioncreator DeleteUser looks something like this:

export const DeleteUser = (userId: number, meta: ISagaActionMeta): ISagaAction<number> => {
  return {
    type: Actions.user.USER_DELETE,
    payload: userId,
    meta
  }
}

on my saga... I do what its needed to delete the user (call the api, bla, bla) and then I call:

yield call(action.meta.redirect, action.meta.path)

The entire idea is just to pass the push function together with the rest of the data and use it when needed it.

How to Transition to Another Route on Successful Async Redux Action, Redirection in a single-page application can be a bit tricky, especially with React and Redux. We can redirect programmatically in the� If you are using redux-saga to manage your side effects and api calls, I would suggest doing this in the saga. Why? Keeps your component clean and you don't need to keep a state in your component just for the redirect. I.e. Steps: Submit a form; Dispatch action; Saga listens for the action, and calls the api; On success, redirect to wherever

Should we use saga for updating UI state and redirecting users after , Under certain circumstances redirect might be done in Sagas on we ended up going with a callback action that we dispatch at success. Thanks for this lib. it is a really nice addition to redux-forms. I was struggling as I am using redux observable. it seems to work great. As I am very new to redux and redux-form and react-router I am not sure how I should deal with the fact the form was submited successfully. I followed your example and it works fine with my form.

how to do redirect when the form submission is successful � Issue #2 , As I am very new to redux and redux-form and react-router I am not how to do redirect when the form submission is successful #2 I have the following action creators: away from the current page if the submission was successful. using async middleware (redux-thunk, redux-saga, redux-logic etc)� Clicking on login here will not redirect to the login If you are new to Redux-Saga then I suggest It receives a response from registerUserService and puts the REGISTER_USER_SUCCESS action.

Build Real App with React #15: Redux Saga - Redirect, In this episode we'll learn how to redirect somewhere else in sagas as on PayPal: http Duration: 13:34 Posted: Jan 24, 2018 In this tutorial, we are going to learn about how to redirect a user from one page to another page in react-router using Redirect component.. Suppose we have a path /blog in our app and we updated it to /tutorials so that now if any user tries to navigate to /blog we need to redirect them to /tutorials, we can do it by using a Redirect component provided by the react-router-dom library.

Comments
  • try putting your put(push('/dashboard')) line outside the try catch block