Question

拥有store.js的文件

import { routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import axios from 'axios';
import chalk from 'chalk';
import Immutable from 'immutable';
import type { Store } from '../types';
import rootReducer from './reducers';

export default (history: Object, initialState: Object = {}): Store => {
  const middlewares = [
    thunk.withExtraArgument(axios),
    routerMiddleware(history),
  ];



  const enhancers = [
    applyMiddleware(...middlewares),
    __DEV__ && typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ?
      window.devToolsExtension({
          serialize: {
              immutable: Immutable
          }
      }) : f => f,
  ];

    const devToolEnhancers = __DEV__ && typeof window === 'object' && typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined' ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
            serialize: {
                immutable: Immutable
            }
        }) : f => f;

   const immutableState  = Immutable.fromJS(initialState)
  const store: Store = createStore(rootReducer, immutableState, compose(...enhancers));



  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('./reducers', () => {
      try {
        const nextReducer = require('./reducers').default;

        store.replaceReducer(nextReducer);
      } catch (error) {
        console.error(chalk.red(`==>   Reducer hot reloading error ${error}`));
      }
    });
  }



  return store;
};

我需要启用所有reducer的console.log

我找到了这段代码：

const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)

let yourApp = combineReducers(reducers)
let store = createStoreWithMiddleware(yourApp)

但我不知道如何结合它。需要控制previos和下一个rudecer状态。尝试很多变化，但不能这样做

Answer 1

您可以尝试使用redux-logger＆＃39;中间件。它将在控制台中记录prevState和nextState。

import createLogger from 'redux-logger';

const middlewares = [
    thunk.withExtraArgument(axios),
    routerMiddleware(history),
    createLogger()
  ];

如何安装所有减速机？ reactjs

1 个答案: