4mobile

document.addEventListener('click', evt => {
  if (evt.target.matches('button.action, button.action *')) {
     console.log('target', evt.target)
     let button = evt.target.closest('button')
     console.log('button', button)
  }
})

.ranging {
  display: none;
}

.ranging.opened {
  display: block;
}

const buttonSelector = '.selector';
const contentSelector = '.ranging';
const activeClass = 'opened';
const toggleContent = (contents, index) =>
  contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));


// делегирование, назначаем обработчик клика один раз для всех кнопок
// наверное, у них есть какой-то общий предок, тогда вместо документа
// вешать обработчик следует на него:
// document.querySelector('селектор_контейнера_с_кнопками').addEventListener(...
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const buttons = document.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, button);
    toggleContent(document.querySelectorAll(contentSelector), index);
  }
});

// или, назначаем обработчик клика индивидуально каждой кнопке
const onClick = function(e) {
  toggleContent(this, +e.currentTarget.dataset.index);
}.bind(document.querySelectorAll(contentSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

Как преобразовать ее в класс, чтобы добавить state с параметром загрузки, который потом можно было бы получать в других частях приложения?

export const getResourcesAction = () => async (dispatch, getState) => {
  const { resources } = getState();
  if (isEmpty(resources)) {
    try {
      dispatch({ type: LOAD_RESOURCES_REQUEST });

      const res = await fetch('/api/resources/all', { credentials: 'include' });
      const data = await res.json();
      dispatch({
        type: LOAD_RESOURCES_SUCCEEDED,
        payload: {
          resources: data,
        },
      });
    } catch (error) {
      dispatch({
        type: LOAD_RESOURCES_FAILED,
        payload: {
          error,
        },
      });
    }
  }
};

const initialState = {
  isFetching: false,
  data: [],
  error: null,
};

export default function resourcesState(state = initialState, action) {
  switch (action.type) {
    case LOAD_RESOURCES_REQUEST:
      return {
        ...state,
        isFetching: true,
        error: null,
      };
    case LOAD_RESOURCES_SUCCEEDED:
      return {
       data: action.payload.resources,
        isFetching: false,
      };
   case LOAD_RESOURCES_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload.error,
      };
    default:
      return state;
  }
}

return {
  ...Object.keys(state).reduce((acc, n) => (acc[n] = null, acc), {}),
  [action.payload.field]: action.payload.value,
};