Getting rid of console logs in redux wrapper with Next.js

user_10182953 0
Viewed 663

Hey guys I just downloaded some source file from internet which uses redux thunk with Next.js in order to see how things work and then after running it with npm run dev the project runs successfully but then in console I keep getting this logs:

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: []
}

These things get rendered first of all and so because of this. I also see them in page source as objects

I have shared an image below please refer to it, I rendered my id in <p> tag but then here I am seeing it as object.

I rendered my ID in tag but here i am seeing it as object

Does anyone from where to get rid of them permanently?

redux-thunk react-redux redux next.js reactjs
2 Answers

This is most likely because you copy the code sample from the docs which sets debug to true when you create a wrapper:

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

Remove the debug property or set it to false to fix the issue

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

Live Demo

Edit 61159443/getting-rid-of-console-logs-in-redux-wrapper-with-next-js

user_94494260

There are two reasons for this that I can think of, either the Debug Property is set to false during the wrapper creation. To Fix that, do this

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

Or you might have some middleware like "logger" in your State. So if that's the case get rid of any middleware you don't need. Logger can be replaced with redux-devtools-extension

user_144664490
Related