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

Posted 2023-02-22

【中文标题】使用 Next.js 摆脱 redux 包装器中的控制台日志

【英文标题】：Getting rid of console logs in redux wrapper with Next.js

【发布时间】：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，但在这里我将其视为对象。

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

【参考方案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);

现场演示