Сделать значения хранилища доступными вне компонентов React Redux

Question

В настоящее время я создаю собственное приложение для реагирования, в котором для управления состоянием используется реагирующая передача. Я пытаюсь дедуплицировать некоторую логику, связанную с аутентификацией, помещая ее в сервис, который не является расширением класса Component React. Когда пользователь входит в приложение, ему возвращается user_token для проверки последующих вызовов API на сервер. Этот токен хранится в редукторе auth, поэтому он будет доступен при вызове mapStateToProps через state.auth.user_token. Я определил функцию в src/utils/fetch.js, которая выполняет вызовы API для меня:

export function fetchAPI(endpoint, method = 'GET', data) {
  let url = 'http:localhost:3000/api/' + endpoint;

  let headers = { 'User-Token': 'XXXXXX' };

  if (method === 'POST') {
    headers['content-type'] = 'application/json';
  }

  let options = {
    method: method,
    headers: headers,
    mode: 'cors' // no-cors, cors, *same-origin
  };

  if (data) {
    options.body = JSON.stringify(data);
  }

  return fetch(url, options).then((response) => {
    ...

Мне интересно, есть ли изящный / нормальный способ заставить эту утилиту узнать о значениях внутри state. Я не хочу явно извлекать это свойство в каждом компоненте, который выполняет аутентифицированные вызовы API - мне, по сути, придется делать это везде, и оно кажется избыточным и многословным. Изменение сигнатуры метода для принятия этого параметра выглядит плохо:

export function fetchAPI(user_token, endpoint, method = 'GET', data) {
                         ^^^^^^^^^^ doesn't change while someone is logged in

Но как-то так лучше:

import storeProvider from './storeProvider';

export function fetchAPI(user_token, endpoint, method = 'GET', data) {
  const user_token = storeProvider.getUserToken();

  ... (go do great stuff with user_token)

Есть ли обычный способ сделать это? Кто-нибудь видел такое извлечение state в нечто, не являющееся контейнером?

Answer 1

После создания store экспортируйте его. Импортируйте store в fetchAPI. Затем используйте store.getState() и извлеките токен пользователя из состояния.

Пример:

// you'll to export the store after you use create store
import store from './store';

// this selector can be used across the app
const getUserToken = ({ auth }) => auth.user_token;

export function fetchAPI(user_token, endpoint, method = 'GET', data) {
  const user_token = getUserToken(store.getState());

  ... (go do great stuff with user_token)