使用 Next.js 摆脱 redux 包装器中的控制台日志答案

【问题标题】：Getting rid of console logs in redux wrapper with Next.js使用 Next.js 摆脱 redux 包装器中的控制台日志
【发布时间】：2020-07-24 07:59:27
【问题描述】：

嘿，伙计们，我刚刚从 Internet 下载了一些源文件，它使用带有 Next.js 的 redux thunk 来查看事情是如何工作的，然后在使用 npm run dev 运行它之后，项目成功运行，但随后在控制台中我不断收到此日志：

1. WrappedApp.getInitialProps wrapper got the store with state {
  loginAndSignupReducer: [],
  getCategoryReducer: { loading: false, err: false, data: [] },
  MyStoryReducer: { loading: false, err: false, data: [] },
  reportStoryReducer: { loading: false, err: false, data: [] },
  getAllDetails: []
}
3. WrappedApp.getInitialProps has store state {
  loginAndSignupReducer: [],
  getCategoryReducer: { loading: false, err: false, data: [] },
  MyStoryReducer: { loading: false, err: false, data: [] },
  reportStoryReducer: { loading: false, err: false, data: [] },
  getAllDetails: []
}
4. WrappedApp.render created new store with initialState {
  loginAndSignupReducer: [],
  getCategoryReducer: { loading: false, err: false, data: [] },
  MyStoryReducer: { loading: false, err: false, data: [] },
  reportStoryReducer: { loading: false, err: false, data: [] },
  getAllDetails: []
}

这些东西首先被渲染，正因为如此。我还在页面源中将它们视为对象

我在下面分享了一张图片，请参考它，我在

标记中呈现了我的 id，但在这里我将其视为对象。

有没有人从哪里永久摆脱它们？

【问题讨论】：

标签： reactjs redux react-redux next.js redux-thunk

【解决方案1】：

我能想到的原因有两个，要么在包装器创建期间将调试属性设置为 false。要解决此问题，请执行此操作

// From This
const wrapper = createWrapper<RootState>(initializeStore, { debug: true })

// To This
const wrapper = createWrapper<RootState>(initializeStore, { debug: false })

// Or Rather
const wrapper = createWrapper<RootState>(initializeStore)

或者您的州可能有一些中间件，例如“记录器”。因此，如果是这种情况，请摆脱您不需要的任何中间件。记录器可以替换为redux-devtools-extension

【讨论】：

【解决方案2】：

这很可能是因为您在创建包装器时从 docs 复制了代码示例，该代码示例将 debug 设置为 true：

export const wrapper = createWrapper<State>(makeStore, {debug: true});

删除debug 属性或将其设置为false 以解决问题

export const wrapper = createWrapper<State>(makeStore);

现场演示

【讨论】：