Redux - полезные расширения для разработки
React

Redux – полезные расширения для разработки

Опубликовано Автор: Дмитрий Поляков

Очень полезно расширение redux-logger, которое позволяет выводить в консоль отформатированные сообщения о каждом action.

Устанавливаем

npm i --save redux-logger

Настроим его так, чтобы не попадал в продакшн:

Код файла store/index.js получился такой:

import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import loggerMiddleware from 'redux-logger';
import rootReducer from '../reducers';

export default function configureStore() {
  if (process.env.NODE_ENV === 'production') {
    return createStore(
      rootReducer,
      applyMiddleware(
        thunkMiddleware
      )
    )
  } else {
    return createStore(
      rootReducer,
      applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
      )      
    )
  }
}

Далее добавляем еще одно отличное расширение redux-devtools https://github.com/zalmoxisus/redux-devtools-extension

Устанавливаем в google chrome по ссылке:
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

После добавления и этого расширения, файл store/index.js будет такой:

import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import loggerMiddleware from 'redux-logger';
import rootReducer from '../reducers';

export default function configureStore() {
  if (process.env.NODE_ENV === 'production') {
    return createStore(
      rootReducer,
      applyMiddleware(
        thunkMiddleware
      )
    )
  } else {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({serialize: true}) : compose;
    return createStore(
      rootReducer,
      composeEnhancers(
        applyMiddleware(
          thunkMiddleware,
          loggerMiddleware
        )   
      )
    )
  }
}

Добавляем Hot Module Replacement в проект

Hot module replacment – нужен для замена кода на лету, без перезагрузки. Их сайт https://webpack.js.org/guides/hot-module-replacement/

Итого файл src/index.js получится:

import React from 'react';
import {Provider} from 'react-redux';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import configureStore from './store';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('root'))
;

if (module.hot) {
  module.hot.accept('./components/App', () => {
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>, 
      document.getElementById('root')
    )
  })
}

serviceWorker.unregister();

А файл src/store/index.js

import {createStore, applyMiddleware, compose} from 'redux';
import thunkMiddleware from 'redux-thunk';
import loggerMiddleware from 'redux-logger';
import rootReducer from '../reducers';

export default function configureStore() {
  if (process.env.NODE_ENV === 'production') {
    return createStore(
      rootReducer,
      applyMiddleware(
        thunkMiddleware
      )
    )
  } else {
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({serialize: true}) : compose;
    const store = createStore(
      rootReducer,
      composeEnhancers(
        applyMiddleware(
          thunkMiddleware,
          loggerMiddleware
        )   
      )
    )
    if (module.hot) {
      module.hot.accept('../reducers', ()=>{
        store.replaceReducer(rootReducer)
      })
    }
    return store;
  }
}
Дмитрий Поляков