Как обработать два файла configureStore для Redux в TypeScript (несколько module.exports)?

Question

Я создаю приложение React Native с TypeScript, используя Redux для моего состояния.

Мне нравится использовать два отдельных файла для configureStore.В JS это выглядит так:

configureStore.dev.js:

import { applyMiddleware, createStore } from "redux";
import logger from "redux-logger";

import reducers from "../reducers";

const configureStore = () => {
  const store = createStore(reducers, applyMiddleware(logger));
  return store;
};

export default configureStore;

configureStore.prod.js:

import { createStore } from "redux";

import reducers from "../reducers";

const configureStore = () => {
  const store = createStore(reducers);
  return store;
};

export default configureStore;

configureStore.js:

import Config from "react-native-config";

if (Config.REACT_ENVIRONMENT === "staging") {

  module.exports = require("./configureStore.dev");
} else {
  // tslint:disable-next-line no-var-requires
  module.exports = require("./configureStore.prod");
}

А затем в App.js:

import React, { Component } from "react";
import Orientation from "react-native-orientation";
import { Provider } from "react-redux";
import Navigator from "./navigation/Navigator";
import configureStore from "./redux/store/configureStore";

export const store = configureStore();

export default class App extends Component {
  componentDidMount = () => {
    Orientation.lockToPortrait();
  };

  render() {
    return (
      <Provider store={store}>
        <Navigator />;
      </Provider>
    );
  }
}

Теперь проблема с TypeScript заключается в том, что - после преобразования этих файлов в .ts и .tsx - этот код генерирует ошибки linting (и, кроме того, блокирует всеJest юнит-тесты от запуска).

Строки, где modules.exports экспортирует соответствующий файл в зависимости от переменных среды, выдает ошибку:

[tslint] require statement not part of an import statement (no-var-requires)

И в App.tsx импорт configureStore throws:

[ts] Module '"/Users/jan/Documents/FullStackFounders/PainButton/painbutton/app/redux/store/configureStore"' has no default export.

Как справиться с этим делом в TypeScript?

Единственное решение, которое я мог придумать, - это использовать только один файл и использовать множество if для всех разработчиков.только конфиги.Но это не кажется мне чистым.

Answer 1

Кажется, вы смешиваете синтаксис import / export и require / module.exports.
Попробуйте использовать динамические выражения импорта.

configureStore.js

export default Config.REACT_ENVIRONMENT === "staging" ? import("./configureStore.dev") : import("./configureStore.prod");

основной файл рендеринга

import configure from "./configureStore.js";

configure.then(configFunc => {
    const store = configFunc();

    ReactDOM.render(<App store={store} />, document.querySelector("#root"));
})

Передача store в качестве реквизитав <App /> Компонент.

Надеюсь, это поможет.