Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to achieve callbacks in Redux-Saga?

Tags:

The scenario is, I want to redirect a user or show alert based on the success, error callbacks after dispatching an action.

Below is the code using redux-thunk for the task

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

because the dispatch action in redux-thunk returns a Promise, It is easy to act with the response.

But now I'm getting my hands dirty on redux-saga, and trying to figure out how I can achieve the same result as above code. since Saga's run on a different thread, there is no way I can get the callback from the query above. so I just wanted to know how you guys do it. or whats the best way to deal with callbacks while using redux-saga ? the dispatch action looks like this :

this.props.actions.login(credentials);

and the 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   } } 
like image 545
ZaL Avatar asked Dec 10 '16 14:12

ZaL


1 Answers

I spent all day dinking around with this stuff, switching from thunk to redux-saga

I too have a lot of code that looks like this

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

its possible to use thunk + saga

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

then over in saga land 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() } } 
like image 100
James Avatar answered Nov 15 '22 18:11

James