Vfrdtyky

I have a React container for user login. When it mounts it fetches some third-party scripts and injects them into the page (this creates a login widget)

The login phase is in two parts, the first part is to log in to the third party system, on completion of that I then need to login to a second system using the payload from the first.

On componentDidMount I fire a request to fetch the third party scripts, all is good here.

When I click on the login button (its a pre-built widget provided by the third-party that fires a callback we can hook into, no need to create the widget etc itself), the callback fires and we get a customer token back, again all good here.

The part that I'm having trouble with using that customer token, I use redux to add it to the store, inside componentDidUpdate I then check prevProps against current props to check for the token, if it exists I fire an action to log in to the second system. I wanted to avoid this action firing multiple times so once its fired once I add a hasRequested field to the store and then check against this in componentDidUpdate to safeguard against it getting called multiple times.

This bit doesn't work, because I have multiple instances of the LoginContainer on the page, the componentDidUpdate is firing multiple times and the store isn't getting updated in time with the hasRequested value, the outcome being that I end up making multiple API requests.

Anyone got any ideas how I can have multiple instances of a container but limit the number of times an action fires when its props update?

Sample code below

LoginContainer

class LoginContainer extends Component {

  /**

   * componentDidMount

   */

  componentDidMount () {

    if (!this.props.thirdPartyCode.hasRequested) {

      this.props.fetchThirdPartySriptsAndLoad();

    }

  }



  /**

   * componentDidUpdate

   */

  componentDidUpdate (prevProps) {

    if (

      prevProps.authentication.customerToken !== this.props.authentication.customerToken

      && !this.props.authentication.hasRequested

    ) {

      this.props.authenticateUserWithSecondSystem();

    }

  }

Authentication reducer

import {

  SECOND_SYSTEM_AUTHENTICATE_REQUEST,

  SECOND_SYSTEM_AUTHENTICATE_SUCCESS,

  SECOND_SYSTEM_AUTHENTICATE_FAILURE,

} from 'actions/authentication/authentication-actions';



export const defaultState = {

  isFetching: false,

  hasRequested: false,

  error: '',

  customerToken: ''

};



/**

 * Reducer for authentication

 * @param {Object} state

 * @param {Object} action

 * @returns {Object} updated state

 */

export default function (state = defaultState, action) {

  switch (action.type) {

    case SECOND_SYSTEM_AUTHENTICATE_REQUEST:

      return Object.assign({}, state, {

        isFetching: true,

        hasRequested: true

      });

    case SECOND_SYSTEM_AUTHENTICATE_SUCCESS:

      return Object.assign({}, state, {

        isFetching: false

      });

Authentication actions

export const SECOND_SYSTEM_AUTHENTICATE_REQUEST = 'SECOND_SYSTEM_AUTHENTICATE_REQUEST';

export const SECOND_SYSTEM_AUTHENTICATE_SUCCESS = 'SECOND_SYSTEM_AUTHENTICATE_SUCCESS';

export const SECOND_SYSTEM_AUTHENTICATE_FAILURE = 'SECOND_SYSTEM_AUTHENTICATE_FAILURE';



/**

 * Request Authenticate

 * @returns {{type: string}}

 */

function requestSecondSystemAuthentication () {

  return {

    type: SECOND_SYSTEM_AUTHENTICATE_REQUEST

  };

}



/**

 * Authenticate Success

 * @param {Object} data - response data

 * @returns {{type: string}}

 */

function secondSystemAuthenticateSuccess (data) {

  return {

    type: SECOND_SYSTEM_AUTHENTICATE_SUCCESS,

    data

  };

}



/**

 * Post Authenticate

 * @returns {Function} - action creator

 */

export function authenticateUserWithSecondSystem (authenticationToken) {

  return dispatch => {

    dispatch(requestSecondSystemAuthentication());



    ApiService.post('/api/authenticate', authenticationToken)

      .then(payload => dispatch(secondSystemAuthenticateSuccess(payload)))

}

In the end I decided I was trying to make it too complex, I've opted to have one action called authenticateUser that gets called on click and that handles the logic to login to the first provider and then the second.