How to get callbacks in Redux-Saga?

Question

Scenario: I want to redirect the user or show a warning based on success, error callbacks after sending the action.

Below is the abbreviated code for the task

this.props.actions.login(credentials) .then((success)=>redirectToHomePage) .catch((error)=>alertError); 

because the submit action in redux-thunk returns Promise, it is easy to respond with a response.

But now I get my hands dirty on sound reduction and trying to figure out how I can achieve the same result as the code above. since Saga is running in a different thread, I cannot get the callback from the request above. so I just wanted to know how you guys do it. or what is the best way to handle callbacks when using the saga saga? the submit action is as follows:

this.props.actions.login (credentials);

and saga

 function* login(action) { try { const state = yield select(); const token = state.authReducer.token; const response = yield call(API.login,action.params,token); yield put({type: ACTION_TYPES.LOGIN_SUCCESS, payload:response.data}); yield call(setItem,AUTH_STORAGE_KEY,response.data.api_token); } catch (error) { yield put({type: ACTION_TYPES.LOGIN_FAILURE, error}) } } 

saga monitor

 export function* loginMonitor() { yield takeLatest(ACTION_TYPES.LOGIN_REQUEST,login); } 

action creator

 function login(params) { return { type: ACTION_TYPES.LOGIN_REQUEST, params } } 

Answer 1

I think you should add a redirect and alert to the input generator. Thus, all logic is in the saga, and it is still easy to verify. So basically your registration saga will look like this:

 function* login(action) { try { const state = yield select(); const token = state.authReducer.token; const response = yield call(API.login,action.params,token); yield put({type: ACTION_TYPES.LOGIN_SUCCESS, payload:response.data}); yield call(setItem,AUTH_STORAGE_KEY,response.data.api_token); yield call(redirectToHomePage); // add this... } catch (error) { yield put({type: ACTION_TYPES.LOGIN_FAILURE, error}); yield call(alertError); // and this } } 

Answer 2

I walked all day with this stuff, moving from thunk to redux-saga

I also have a lot of code that looks like

 this.props.actions.login(credentials) .then((success)=>redirectToHomePage) .catch((error)=>alertError); 

it can be used thunk + saga

 function login(params) { return (dispatch) => { return new Promise((resolve, reject) => { dispatch({ type: ACTION_TYPES.LOGIN_REQUEST, params, resolve, reject }) } } } 

then in the saga you can just do something like

 function* login(action) { let response = yourApi.request('http://www.urthing.com/login') if (response.success) { action.resolve(response.success) // or whatever } else { action.reject() } } 

Answer 3

You can simply work by passing on additional information about your successes and callback functions with errors to the payload itself. Since then, as the reduction template works completely wrong.

 this.props.actions.login({ credentials, successCb: success => redirectToHomePage) errorCb: error => alertError) }); 

In the saga, you can deconstruct these callbacks from the payload and run them very easily depending on the flow of programs.