Управление состоянием пользовательского интерфейса в React Redux

Как мы обсуждали в комментариях, у вас может быть состояние, которое выглядит так:

store = {
    event: <state>
    attendee: <state>
    locations: <state>,
    uiFlags: {
        showAddEventPopup: false,
        showEditEventPopup: false,
        isEventAddingSpinner: false,
        isEditingSpinner: false
   }
}

С редуктором uiFlags, например:

const getDefaultState => ({
    showAddEventPopup: false,
    showEditEventPopup: false,
    isEventAddingSpinner: false,
    isEditingSpinner: false
});

export const ACTION = {
    ENABLE_FLAG: 'enableUiFlag'
    DISABLE_FLAG: 'disableUiFlag',
    TOGGLE_FLAG: 'toggleUiFlag',
    RESET_ALL_FLAGS: 'resetUiFlags'
}

const reducer (state = getDefaultState(), action = {}) => {
    const {type, payload} = action;

    if (!payload) return state;      

    switch(type) {
        case ACTION.ENABLE_FLAG: {
            return {
                ...state,
                [payload]: true
            }
        }
        case ACTION.DISABLE_FLAG: {
            return {
                ...state,
                [payload]: false
            }
        }
        case ACTION.TOGGLE_FLAG: {
            return {
                ...state,
                [payload]: !state[payload]
            }
        }
        case ACTION.RESET_ALL_FLAGS: {
            return getDefaultState();
        }
        default: {
            return state;
        } 
    }
}

С преобразователь, как:

import {ACTIONS} from './ui-flag-reducer'

function enableUiFlag(flagType) {
  return dispatch => {
    dispatch({
        type: ACTION.ENABLE_FLAG,
        payload: 'showEditEventPopup'
    })
  };
}