Как я могу подключиться к магазину в нереагирующих компонентах

Question

Я бы хотел подключиться к магазину в нереагирующих компонентах. Моя главная проблема заключается в том, что когда я пытаюсь getState или dispatch в классе без реакции, например: createStoreWithApi(api).dispatch(isLoading(true)), это создаст новый экземпляр магазина, и я просто хочу изменить уже созданное хранилище. И я знаю, что должен был бы избежать использования магазина как функции.

Можно ли установить withExtraArgument после создания магазина? Проблема в том, что я не могу просто импортировать api в файл моего магазина, потому что мне нужно сначала получить API из бэкэнда.

Вот так выглядит мой магазин:

const createStoreWithApi = (api: IApi, initialState?: {}) => {
  const middlewares = [
    thunkMiddleware.withExtraArgument({
      api
    })
  ];
  const enhancer = composeWithDevTools(applyMiddleware(...middlewares));
  return createStore(rootReducer, initialState!, enhancer);
};

Хотелось бы получить совет

Answer 1

Вы можете создать один экземпляр хранилища в файле create-store.js, который хранится в синглтоне хранилища. Затем импортируйте этот экземпляр во все файлы, которым необходим доступ для store.getState и store.dispatch.

// create-store.js
let store = null;

export const createStoreWithApi = (api: IApi, initialState?: {}) => {
  const middlewares = [
    thunkMiddleware.withExtraArgument({
      api
    })
  ];
  const enhancer = composeWithDevTools(applyMiddleware(...middlewares));
  store = createStore(rootReducer, initialState!, enhancer);
};

export default store;

В вашем файле точек входа вы можете запустить createStoreWithApi один раз с api и initialState.

// index.js
import { createStoreWithApi } from "./create-store";

// init store
createStoreWithApi("api string", {...initialState});

И во всех остальных файлах, которым требуется доступ к магазину:

import store from "./create-store";

const state = store.getState();

Что касается установки значения API. Я бы рекомендовал установить это в магазине с новым действием редуктора. Тогда ваше промежуточное ПО и другие компоненты будут иметь к нему доступ через const state = store.getState();. Тогда вам не нужно беспокоиться об инициализации вашего магазина с ним. А твои компоненты store.dispatch(setAPI("new api string")) потом store.dispatch(isLoading(true)). И ваше промежуточное программное обеспечение, выполняющее вызовы, может запустить store.getState() и получить текущее значение API перед выполнением внутреннего вызова.