CODEWITHSUNDEEP
reactjstypescriptreduxreact-reduxtsx
J. Hesters
J. Hesters

Reputation: 14796

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

I'm building a React Native app with TypeScript using Redux for my state.

I like using two seperate files for configureStore. In JS This looks like this:

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");
}

And then within 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>
    );
  }
}

The problem now with TypeScript is that - after converting these files to .ts and .tsx - this code throws linting errors (and it furthermore blocks all Jest unit tests from running).

The lines where modules.exports exports the respective file depending on environment variables throws the error:

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

And in App.tsx the import of configureStore throws:

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

How would one handle this case in TypeScript?

The only solution I could come up with was only using one file and using a lot of if's for all the Dev only configs. But that doesn't seem clean to me.

Upvotes: 0

Views: 1997

Answers (1)

Ivan Burnaev
Ivan Burnaev

Reputation: 2730

It seems you are mixing import / export and require / module.exports syntax.
Try to use dynamic import expressions.

configureStore.js

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

main render file

import configure from "./configureStore.js";

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

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

Pass the store as a prop to the <App /> Component.

I hope it will help.

Upvotes: 3

Related Questions