时间戳

首页 > 解决方案 > 如何处理 TypeScript 中 Redux 的两个 configureStore 文件（多个 module.exports）？

reactjs - 如何处理 TypeScript 中 Redux 的两个 configureStore 文件（多个 module.exports）？

问题描述

我正在为我的状态使用 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)

在throwsApp.tsx的导入中：configureStore

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

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

我能想出的唯一解决方案是只使用一个文件，并为所有 Dev only 配置使用大量 if。但这对我来说似乎并不干净。

标签： reactjstypescriptreduxreact-reduxtsx

解决方案

看来您正在混合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 />组件。

我希望它会有所帮助。

推荐阅读