如何在 TypeScript 中为 Redux 处理两个 configureStore 文件（多个 module.exports）？

Question

我正在为我的状态使用 Redux 使用 TypeScript 构建一个 React Native 应用程序。

我喜欢为 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 的导入抛出：

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

如何在 TypeScript 中处理这种情况？

我能想出的唯一解决方案是只使用一个文件并对所有 Dev 专用配置使用大量 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 作为 prop 传递给 <App /> 组件。

希望对您有所帮助。

如何在 TypeScript 中为 Redux 处理两个 configureStore 文件（多个 module.exports）？

How to handle two configureStore files for Redux in TypeScript (multiple module.exports)?

typescript

reactjs

redux

tsx

react-redux