How to achieve callbacks in Redux-Saga? - reactjs

Question

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

Answer 1

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

Answer 2

I think you should add redirect and alert to the login generator. This way all logic is in the saga and it is still easily tested. So basically your login saga would 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 3

You can simply work up by passing the extra info about your success and error callback functions into the payload itself. Since, redux pattern works in a quite decoupled manner.
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 based on your program flow.

Answer 4

Your call:
this.props.addCutCallback(currentTime, callback);
Your mapping that you pass to connect() function:
const mapDispatchToProps = (dispatch) => ({
addCutCallback: (time, callback) =>
dispatch(ACTIONS.addCutCallback(time, callback)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);
Your saga:
import {put, takeEvery, all, select} from 'redux-saga/effects';
import * as Actions from './../actions';
const getCuts = (state) => state.cuts;
function* addCutSaga({time, callback}) {
yield put({type: Actions.ADD_CUT, time});
const cuts = yield select(getCuts);
callback(cuts);
}
function* cutsSaga() {
yield takeEvery(Actions.ADD_CUT_CALLBACK, addCutSaga);
}
export default function* rootSaga() {
yield all([cutsSaga()]);
}

Answer 5

An approach that I find more elegant is to simply use the useEffect.
//selectors.ts
export function hasAuthError(state: RootState): boolean {
return state.auth.error;
}
export function getAuthMessage(state: RootState): string {
return state.auth.message;
}
// some react component
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Toast from 'react-native-toast-message';
import { getAuthMessage, hasAuthError } from 'src/store/auth/selectors';
...
const message = useSelector(getAuthMessage);
const hasError = useSelector(hasAuthError)
...
useEffect(() => {
if (hasError) {
Toast.show({
type: 'error',
text2: message,
topOffset: 50,
visibilityTime: 5000
});
}
}, [message, hasError]);