Redux Saga authentication with router 6

Question

I am porting an application from Router v2 to Router v6.

I am attempting to get authentication to work.

This bit of code gets hit when the user hits login

    sendLoginRequest(event) {

        // Prevent the page from unloading from the form submit
        event.preventDefault();

        // Don't do anything if the form is not valid
        if (!this.isFormValid()) {
            return;
        }

        // Make the request to the server to login
        this.props.login({
            emailAddress: this.state.emailAddress,
            password: this.state.password,
            onLoginSuccess: () => {
                ReactGA.event({
                    category: 'Login',
                    action: 'success',
                    label: 'From Login Page'
                });

                // Login was successful, send the user to the main page
                this.props.navigate('/');
            },
            onLoginFailure: (error) => {
                ReactGA.event({
                    category: 'Login',
                    action: 'failure',
                    label: 'From Login Page'
                });
                // Set an error message depending on the type of error
                this.setErrorMessage(error);
            }
        });
    }

mapDisptachToProps

    static mapDispatchToProps(dispatch) {
        return {
            login: (options) => dispatch({type: LOGIN, ...options}),
            getSettings: () => dispatch({type: GET_SETTINGS})
        };
    }

It gets to this.props.login, and goes through the reducers, as I would expect.

However, none of the reducers I have match the above layout with the exception of the below, which exists in the sagas\authenticator.js

function* login() {
  while (true) {
    const {emailAddress, password, onLoginSuccess, onLoginFailure} = yield take(actions.LOGIN);

    try {

      // Make the request to login only if the user is not currently logged in
      const isLoggedIn = yield select(_isLoggedIn);
      if (!isLoggedIn) {
        yield call(actions.login, emailAddress, password);
        yield put({type: actions.GET_PROFILE});

        // Call the success callback if one is provided
        if (onLoginSuccess) {
          onLoginSuccess();
        }
      }
    } catch (error) {

      // Call the failure callback if one is provided
      if (onLoginFailure) {
        onLoginFailure(error);
      }
    }
  }
}

This contains some sort of reference to the above code blocks calls, this also however never gets hit.

What am I missing here? I get no errors of any kind, just a lack of functionality.

Answer 1

What I needed to do in this scenario was ensure my fork strategy for Redux was changed from

export default function* root() {
    yield [
        fork(login),
        fork(logout),
        fork(isLoggedIn),
        fork(getProfile),
        fork(forgotPassword),
        fork(resetPassword)
    ];
}

to

export default function* root() {
    yield fork(login);
    yield fork(logout);
    yield fork(isLoggedIn);
    yield fork(getProfile);
    yield fork(forgotPassword);
    yield fork(resetPassword);
}

and now the proper bit of code is being called and the API is being hit.

However I am unsure if this has other implications I'm perhaps unaware of, and will update this post when I learn more.