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

Question

У меня есть приложение React, использующее Redux, на данный момент есть 3 редуктора - Event, Attendee, Locations.У нас есть действия, чтобы добавить / изменить / удалить все 3 редуктора.

Пока все хорошо.

Теперь проблема в том, что у меня много состояний пользовательского интерфейса, таких как - showAddEventPopup, ShowEditEventPopup, isEventAddingSpinner, isEditingSpinnerи многое другое.Мне нужно было бы создать действия для манипулирования всеми этими флагами, так как многие из них основаны на результатах избыточного числа.То есть: показывать спиннер при отправке запроса, переключать isError при получении ошибки от сервера ... etc

Я уверен, что есть какой-то элегантный способ справиться с этим?

Answer 1

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

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'
    })
  };
}