How to separate production and development code in React Native?

Refresh

December 2018

Views

750 time

1

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

2 answers

1

Redux Logger был изменен на некоторое время назад.

Теперь вам нужно импортировать, как это: import { createLogger } from 'redux-logger';

В приведенном выше примере вы можете сделать что-то вроде этого:

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

Вы можете использовать __DEV__глобальную константу. Кроме того, столпотворение компилятор достаточно умен , чтобы полностью удалить код охраняемых констант, так что вы можете также уменьшить размер кода.

Например, мы используем этот код для инициализации магазина:

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
}