Как объединить средство для очистки состояния с существующим промежуточным ПО в React-Redux

Question

Мой магазин редуксов довольно большой; Redux Devtools предлагает продезинфицировать мои большие объекты для повышения производительности.

Я следил за документами здесь: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive -использование памяти-и-процессора

Я попробовал несколько комбинаций здесь, но ни одна из них не дала мне ожидаемого результата.

Текущая версия, показанная ниже, приводит к тому, что состояние возвращается как функция, а не объект. Я знаю, что делаю что-то не так, но я не уверен, что. Любое руководство будет высоко ценится.

Вот мой магазин. js:

    'use strict'
    // libraries
    import { createStore, applyMiddleware, compose } from 'redux'

    // middleware
    import logger from 'redux-logger'
    import thunk from 'redux-thunk'

    // reducers
    import reducer from './reducers'

    const withLogger = false ? (thunk, logger) : thunk

    const isProd = process.env.NODE_ENV === 'production'

    const middleware = isProd ? thunk : withLogger

    const composeEnhancers = isProd
      ? compose
      : window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

    // sanitizers to keep redux devtools from using excessive memory
    const actionSanitizer = action =>
      !!action.id
      && action.type === `RECEIVE_${action.id.toString().toUpperCase()}_COLLECTION`
        ? { ...action, data: '<<LONG_BLOB>>' }
        : action

    const store = createStore(
      reducer,
      composeEnhancers(applyMiddleware(middleware)),


// The addition of this code breaks my store

      window.__REDUX_DEVTOOLS_EXTENSION__
        && window.__REDUX_DEVTOOLS_EXTENSION__({
          actionSanitizer,
          stateSanitizer: state =>
            state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
        })

// End breaking code

    )

Вторая попытка

Я сделал пару обновлений и теперь могу увидеть эффект дезинфицирующих средств в devtools - в зависимости от размещения в моей функции createStore. К сожалению, это меняет мое поведение composeEnhancers (срабатывает или не срабатывает в зависимости от размещения)

// middleware with or without logger
const middlewareEnhancer =
  true || ENV === 'production' // change to false to prevent logger output
    ? applyMiddleware(thunk, logger)
    : applyMiddleware(thunk)

// sanitizers to keep redux devtools from using excessive memory
const actionSanitizer = action =>
  !!action.id
  && action.type === `RECEIVE_${action.id.toString().toUpperCase()}_COLLECTION`
    ? { ...action, data: '<<LONG_BLOB>>' }
    : action

// compose
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(middlewareEnhancer) ||
  compose(middlewareEnhancer)

const store = createStore(
  // createStore signature > reducer, preLoadedState, enhancer
  rootReducer,
  // devtools extension works when I place it here per the examples in docs
  // BUT composed enhancers fail
  // Obviously, since the format wouldn't match the createStore signature
  // I have no idea how `__REDUX_DEVTOOLS_EXTENSION__` should be used in conjunction with composeEnhancers

  undefined,
  composeEnhancers,

  // devtools extension fails when placed here
  // composed enhancers run

  window.__REDUX_DEVTOOLS_EXTENSION__
    && window.__REDUX_DEVTOOLS_EXTENSION__({
      actionSanitizer,
      stateSanitizer: state =>
        state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
    })

)

Наконец, настойчивость ftw!

Я ненавижу сдаваться; понял это после перечитывания всей документации, опубликованной @markerikson. Всегда читайте документы: '(

Это может быть бесполезно для тех, кто использует configureStore и Redux Toolkit, но я документирую это независимо от того.

Моя большая ошибка заключалась в том, что actionSanitizer и stateSanitizer являются опциями расширения Devtools и должны быть добавлены в качестве таковых. Почувствуйте себя дураком, но, по крайней мере, я этого не забуду.

Осталось только реализовать redux -devtools-extension , чтобы избежать использования window.__SOMEFUNC__, как предложено markerikson.

Фактическое решение:

'use strict'
// libraries
import { createStore, applyMiddleware, compose } from 'redux'

// middleware
import logger from 'redux-logger'
import thunk from 'redux-thunk'

// reducers
import rootReducer from './reducers'

// middleware with or without logger
const middlewareEnhancer =
  true || ENV === 'production' // change to false to prevent logger output
    ? applyMiddleware(thunk, logger)
    : applyMiddleware(thunk)

// sanitizers to keep redux devtools from using excessive memory
const actionSanitizer = action =>
  !!action.id
  && action.type === `RECEIVE_${action.id.toString().toUpperCase()}_COLLECTION`
    ? { ...action, data: '<<LONG_BLOB>>' }
    : action

// compose
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({

    // add sanitizers here as devtools options
    // see https://github.com/zalmoxisus/redux-devtools-extension/tree/94f7e53800f4665bddc9b7438c5cc75cfb4547cc#12-advanced-store-setup
    // section 1.2

    actionSanitizer,
    stateSanitizer: state =>
      state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
  }) || compose

const enhancer = composeEnhancers(middlewareEnhancer)

const store = createStore(rootReducer, undefined, enhancer)

export default store

Answer 1

В качестве первого наблюдения эта строка кажется неправильной:

const withLogger = false ? (thunk, logger) : thunk

Я настоятельно рекомендую вам сначала перейти к использованию функции configureStore из нашего официальный пакет Redux Toolkit , который обрабатывает процесс установки магазина для вас. Оттуда вы все равно можете передать параметры конфигурации DevTools в configureStore(), если хотите.