react-saga call function on source component - reactjs

Question

I'm pretty unsure how to ask this correctly. (I'm sorry) Basically I want to call the onError function in my Component with the Error String when the Saga function got a error. So I can fire up the Snackbar for 5 sec and then hide it again.
But I don't know how exactly I can call this Function from my Saga function. Currently it return the error on the this.state.error State as String. I tried to use componentWillReceiveProps but this doesn't work on the 2nd try when the string is still the same.
To avoid a xyproblem I'll just post the piece of code that I have.
I got the following component:
class RegisterForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
username: '',
password: '',
SnackbarOpen: false,
};
}
onSubmit = (event) => {
event.preventDefault();
this.props.register(this.state.email, this.state.username, this.state.password);
}
onError(error) {
this.setState({SnackbarOpen: true})
setTimeout(() => {
this.setState({SnackbarOpen: false});
}, 5000);
}
render(): with <form>
}
const mapStateToProps = (state) => ({
error: state.auth.error,
});
const mapDispatchToProps = (dispatch) => ({
register: (email, username, password) => {
dispatch(Actions.register(email, username, password));
}
});
export default connect(mapStateToProps, mapDispatchToProps)(RegisterForm);
Which call this Redux-Saga Function:
import { Types } from './Actions';
import CognitoService from './CognitoService';
function* register(action) {
try {
const result = yield call(CognitoService.register, action);
yield put({ type: Types.registrationSuccess, user: result.user });
} catch(error) {
yield put({ type: Types.registrationFail, error: error.message });
}
}
function* authSaga() {
yield takeLatest(Types.register, register);
}
export default authSaga;

Answer 1

Add a switch case to your auth reducer to match on the action type: Types.registrationFail. It should then pull out the registered error message and assign it to the auth.error field in your auth state. e.g.
authReducer(prevState, action){
...
switch(action.type){
case Types.registrationFail:
return {
...prevState,
error: action.error
};
}
...
}
Your component will pick up the store change via the connect(..) function. Then simply update your component with the componentWillReceiveProps lifecycle method to check the value of this message. e.g.
componentWillReceiveProps(nextProps, nextState){
if(nextProps.error != null && ! nextState.SnackbarOpen){
this.onError();
}
}
Making the assumption here that your snackbar is in within this component as well and simply pull its display text from the this.props.error value. Otherwise, there is scope to clean this up a bit more.

Answer 2

In this situation I see two solutions. The first one is more preferable, I think, with redux saga usual approach.
Rendering based on the store values
In your example you save "SnackbarOpen" variable on state level.
this.setState({SnackbarOpen: true})
Instead you can have a peace of store for the "register" component and save that variable there. So in such case, saga will change that value in the store on error. Simple example is:
function* register(action) {
try {
const result = yield call(CognitoService.register, action);
yield put({ type: Types.registrationSuccess, user: result.user });
} catch(error) {
yield put({ type: Types.registrationFail, error: error.message });
yield put({ type: Types.registrationSnackBarOpen });
yield delay(5000);
yield put({ type: Types.registrationSnackBarClose });
}
}
And, of course, bind that value to your component.
Adding callbacks
I don't recommend to use such approach, but it still exists. You can just add callbacks to your actions and call them in sagas. For example:
Component:
this.props.register(this.state.email, this.state.username, this.state.password, this.onError.bind(this);
Saga:
function* register(action) {
try {
const result = yield call(CognitoService.register, action);
yield put({ type: Types.registrationSuccess, user: result.user });
} catch(error) {
yield put({ type: Types.registrationFail, error: error.message });
action.onError();
}
}