Race Conditions Redux

action.js

export const SEARCH_POST_START = 'SEARCH_POST_START';

export const searchPostNoResults = data => ({
    type: SEARCH_POST_NO_RESULTS, data,
});

reducer.js

import {
    SEARCH_POST_SUCCESS,
    SEARCH_POST_ERROR,
    SEARCH_POST_START,
    SEARCH_POST_NO_RESULTS,
} from '~/apis';

export const initialState = {
    error: false,
    errorMessage: undefined,
    isSearching: false,
    searchResults: [],
    searchText: '',
    timestamp: undefined,
};

function actionIsValid(state, data) {
    return data.timestamp >= state.timestamp;
}

export default function searchReducer(state = initialState, action) {
    const { type, data } = action;
    switch (type) {
        case SEARCH_POST_SUCCESS: {
            if (actionIsValid(state, data)) {
                return {
                    ...state,
                    ...data,
                    searchResults: mockSearch,
                    isSearching: false,
                };
            }
            return state;
        }

        case SEARCH_POST_START:
            return {
                ...state,
                ...data,
                isSearching: true,
            };

        case SEARCH_POST_ERROR: {
            if (actionIsValid(state, data)) {
                return {
                    ...state,
                    ...data,
                    searchResults: mockSearch,
                    isSearching: false,
                };
            }
            return state;
        }

        default:
            return state;
    }
}

thunk.js

export function search(searchQuery) {
  return async (dispatch, getState) => {
    const timestamp = Date.now();
    const startData = { searchText: searchQuery, timestamp };
    
    dispatch(searchPostStart(startData));
    try {
      const url = `${URL}?searchQuery=${searchQuery}`;
      const options = {};
      const response = await fetch(url, options);

      const json = await response.json();
      const success = { searchResults: json, timestamp };
      return dispatch(searchPostSuccess(success));
    } catch (error) {
      const err = { error: true, errorMessage: error };
      return dispatch(searchPostError(err));
    }
  };
}

How would the time be diff coz ur always setting the time on action start and ur using the same time on success right ?

How would the time be diff coz ur always setting the time on action start and ur using the same time on success right?

This is for handling race conditions, commonly found when allowing "search while you type", when the function starts it sets a time stamp on the state, that same timestamp is used when it ends, but if a 2nd call goes out, the state will have a new timestamp, if the first call comes back, it does not have the new timestamp, it has its timestamp, therefore the timestamp the state is expecting will not equal the timestamp that first call is returning.

The first call goes off with a TS of 10, another one goes off with a TS of 12, and yet another one with TS of 17. The state is expecting 17 now, and the second call comes back, it dispatches success with a TS of 12 so they do not match and an update is not applied, then the first one comes back with a TS of 10 and that still does not match so once again an update is not applied, but the third call finally comes back and it's TS is 17 which does match, therefore the state update will now be applied.