Guillaume Munsch
Guillaume Munsch

Reputation: 1283

How to separate production and development code in React Native?

I haven't found any proper answer to this sadly.

I'm currently developing a react-native app with redux and I found out that the release version is getting slowed down by some development tools.

Here's an example:

const store = createStore(
  Reducers,
  composeWithDevTools(
    applyMiddleware(thunk),
  ),
);

And this composeWithDevTools is obviously some development tool and in release I should use another function called compose. What I'd like to do would be something like this:

//development
const store = createStore(
  Reducers,
  composeWithDevTools(
    applyMiddleware(thunk),
  ),
);
//production
const store = createStore(
  Reducers,
  composeWithDevTools(
    applyMiddleware(thunk),
  ),
);
//end

It would automatically choose the right code sample considering where I am. (Dev or release).

Do you guys know some tool I could use for this ?

Thanks in advance

Upvotes: 1

Views: 1382

Answers (2)

user2266462
user2266462

Reputation:

You can use __DEV__ global constant. Moreover, babel compiler smart enough to completely remove code guarded by constants, so you also can reduce code size.

For example, we use this code to initialize store:

function setupStore(extra = {}) {
  const middlewares = [thunk.withExtraArgument(extra)]
  if (__DEV__) {
    const createLogger = require('redux-logger').createLogger // redux-logger 3.x
    const logger = createLogger()
    middlewares.push(logger)
  }
  const store = createStore(reducer, applyMiddleware(...middlewares), autoRehydrate())
  return store
}

Upvotes: 9

Mark Homoki
Mark Homoki

Reputation: 11

Redux Logger has been changed a little while ago.

Now you need to import like this: import { createLogger } from 'redux-logger';

In the example above you can do something like this:

const { createLogger } = require('redux-logger');
const logger = createLogger();
middlewares.push(logger);

Upvotes: 1

Related Questions