如何在React Redux中将状态消毒器与现有中间件结合

我的redux商店相当大；Redux Devtools建议清理较大的对象以提高性能

我遵循了这里的文档：

我在这里尝试了很多组合，但没有一个能给我预期的输出

当前版本（如下所示）导致状态作为函数而不是对象返回。我知道我做错了什么，但我不知道是什么。任何指导都将不胜感激

这是my store.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

    )

---

第一个观察结果是，这条线似乎是错误的：

const with logger=false？（砰，记录器）：砰

---

我强烈建议您首先切换到使用，它为您处理商店设置过程。从那里，如果需要，您仍然可以将DevTools配置选项传递给

configureStore（）

。

第一个观察结果是，这一行似乎是错误的：

const with logger=false？（砰，记录器）：砰

---

我强烈建议您首先切换到使用，它为您处理商店设置过程。如果需要，您仍然可以将DevTools配置选项传递到

configureStore（）

。

只需为使用redux

工具包的用户完成回答，下面是一个对我来说很有用的示例条目

actionSanitizer:（操作）=>{
开关（真）{
案例操作类型包括（已解决）：
返回action.payload的类型！==“未定义”
？{…操作，有效负载：“”
：{…操作，结果：'}；
/*…更多条目*/
违约：
返回动作；
}
},
状态消毒剂：（状态）=>
状态数据？矩阵
? {…状态，数据：{…状态.数据，矩阵：'}
：陈述，
};

然后，我在工具箱的
configureStore
函数中引用配置：

const store=configureStore({
减速器：持久减速器，
中间件：（getDefaultMiddleware）=>
getDefaultMiddleware({
图恩：错，
serializableCheck:false，
immutableCheck:false，
}).prepend（中间产品），
预加载状态：initialState，
devTools:devToolsConfiguration，//只为那些使用redux
工具包的人完成答案，下面是一个对我来说很有用的示例条目

actionSanitizer:（操作）=>{
开关（真）{
案例操作类型包括（已解决）：
返回action.payload的类型！==“未定义”
？{…操作，有效负载：“”
：{…操作，结果：'}；
/*…更多条目*/
违约：
返回动作；
}
},
状态消毒剂：（状态）=>
状态数据？矩阵
？{…状态，数据：{…状态.数据，矩阵：'}
：陈述，
};

然后，我在工具箱的
configureStore
函数中引用配置：

const store=configureStore({
减速器：持久减速器，
中间件：（getDefaultMiddleware）=>
getDefaultMiddleware({
图恩：错，
serializableCheck:false，
immutableCheck:false，
}).prepend（中间产品），
预加载状态：initialState，
devTools:devToolsConfiguration，//我使用withLogger隐藏/显示logger中间件的控制台输出。我通常将其保留为
false
，因为logger在控制台中添加了太多噪音。但是，此设置在不包含附加状态消除器的情况下运行良好，因此withLogger变量不会影响我的预期输出（我会看一下toolkit，它看起来确实很有帮助）我是说三元语句在当前编写时看起来是错误的，尤其是
（thunk，logger）
part。至少，我还建议阅读Redux文档中的页面，以了解商店设置的示例。看起来我已经落后了。我已经有一段时间没有阅读文档了。谢谢你的帮助。我会回来更新我的帖子。我在Redux 4x文档中没有看到任何关于ActionSanitarizers的内容。我想这已经不再必要了ry.看来更新已经就绪。DevTools扩展文档。但是，正如我已经说过的，“手册”
窗口。无论DevTools扩展中显示的逻辑是什么，都很难使用。请对该部分使用
redux DevTools扩展
NPM包或redux工具包，如中所示。然后传入选项。我使用with logger隐藏/显示记录器中间件的控制台输出。我通常将其保留为
false
，因为logger在控制台中添加了如此多的噪音。虽然没有额外的状态消毒剂，但此设置工作正常，因此withLogger变量不会影响我的预期输出（不过我会看看toolkit，它看起来确实很有用）我是说，三元语句看起来与当前编写的语句一样错误，尤其是
（thunk，logger）
part。至少，我还建议阅读Redux文档中的页面，以了解商店设置的示例。看起来我已经落后了。我已经有一段时间没有阅读文档了。谢谢你的帮助。我会回来更新我的帖子。我在Redux 4x文档中没有看到任何关于ActionSanitarizers的内容。我想这已经不再必要了ry.看来更新已经就绪。DevTools扩展文档。但是，正如我已经说过的，“手动”
窗口。DevTools扩展中显示的任何逻辑都很难使用。请使用
redux DevTools扩展
NPM包或redux工具包来处理该部分，如中所示。然后传入选项。

// 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
    })

)


'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