Почему не работает redux-logger в изоморфном приложении?

Question

[Максим Антонихин]

Для примера взял репозиторий https://github.com/bananaoomarang/isomorphic-redux и добавил в него redux-logger
Сделал, вроде бы, всё правильно.

const store    = applyMiddleware(promiseMiddleware, logger)(createStore)(reducer);

При запуске приложения в браузере выдаёт ошибку

ReferenceError: window is not defined
   at /home/max/projects/isomorphic-redux/node_modules/redux-logger/lib/index.js:55:33
   at /home/max/projects/isomorphic-redux/shared/lib/promiseMiddleware.js:12:5
   at /home/max/projects/isomorphic-redux/shared/lib/fetchComponentData.js:9:38
   at Array.map (native)
   at fetchComponentData (/home/max/projects/isomorphic-redux/shared/lib/fetchComponentData.js:9:26)
   at /home/max/projects/isomorphic-redux/server.jsx:71:5
   at /home/max/projects/isomorphic-redux/node_modules/react-router/lib/match.js:58:5
   at /home/max/projects/isomorphic-redux/node_modules/react-router/lib/useRoutes.js:120:15
   at done (/home/max/projects/isomorphic-redux/node_modules/react-router/lib/AsyncUtils.js:49:19)
   at /home/max/projects/isomorphic-redux/node_modules/react-router/lib/AsyncUtils.js:55:7

Помогите понять, куда копать с такой ошибкой?

Answer 1

[Максим Антонихин]

Решилось проверкой "если браузер".

import { compose, createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import * as reducers from './reducers';
import promises from './middlewares/promises';

const reducer = combineReducers(reducers);
let store = {};

if(process.browser) {
  const logger = createLogger();
  const finalCreateStore = compose(
    applyMiddleware(promises, logger)
  )(createStore);
  store = finalCreateStore(reducer);
} else {
  const finalCreateStore = compose(
    applyMiddleware(promises)
  )(createStore);
  store = finalCreateStore(reducer);
}

export default store;

Comments

[Никита Гущин]

выглядит ляповато. Сделали бы просто две функции - одну для server side, другую на клиент с логгером.

[Amazing-Space-Invader]

Плюсану, можешь посмотреть как сделано здесь: https://github.com/GordyD/3ree

Answer 2

[Islam Ibakaev]

лучше как-то так, чтобы не повторяться

import { compose, createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import * as reducers from './reducers';
import promises from './middlewares/promises';


const reducer = combineReducers(reducers);
const middlewares = [promises];

if(process.env.NODE_ENV === 'development') {
  
  if(process.browser) {
    middlewares.push(createLogger());
  }
  
  // другие миддлвары, которые использовать только в этой среде
}

const store = compose(applyMiddleware(...middlewares))(createStore)(reducer);

export default store;