Next.js: Redux DevTools example

[kolpav]

How should I enable redux devtools? There is no mention about it in issues and I am unable to make it work. It would be really nice to have it in redux example because I think it is safe to say that everybody who develops react app with redux is using devtools. Bellow is what I have tried.

import {
  createStore as createReduxStore,
  applyMiddleware,
  compose
} from 'redux'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'remote-redux-devtools'

export const createStore = (initialState = {}) => {
  const middleware = [
    thunkMiddleware,
    () => next => action => {
      console.log('action', action)
      next(action)
    }
  ]
  const enhancers = []
  const store = createReduxStore(
    state => ({ ...state }),
    initialState,
    composeWithDevTools(
      applyMiddleware(...middleware),
      ...enhancers
    )
  )
  return store
}

export const initStore = (initialState = {}) => {
  const isServer = typeof window === 'undefined'
  if (isServer) {
    return createStore(initialState)
  } else {
    if (!window.store) {
      window.store = createStore(initialState)
    }
    return window.store
  }
}

```javascript
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { initStore } from '../store'

class AppContainer extends Component {
static getInitialProps ({ req }) {
const store = initStore()
return { initState: store.getState() }
}
constructor (props) {
super(props)
this.store = initStore(props.initState)
}
render () {
return (

{this.props.children}

)
}
}

export default AppContainer

My page file
```javascript
// imports..
export default () => (
  <AppContainer>
    <TestViewContainer />
  </AppContainer>
)

[arunoda]

I think there's nothing specific related to Redux devtools and Next.js.

[kolpav]

You are right I was confused by this line in https://github.com/zalmoxisus/redux-devtools-extension

1.5 For React Native, hybrid, desktop and server side Redux apps
Include Remote Redux DevTools's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.

So I started tinkering with the remote devtools when regular ones works just fine like so

  import { createStore, applyMiddleware, compose } from 'redux';

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(reducer, preloadedState, composeEnhancers(
    applyMiddleware(...middleware)
  ));

Closing, thanks and good luck with 2.0 release. Really great project

[russelh15]

@kolpav Did you run into an issue getting the actions to show up in Redux Dev Tools when it's fired from getInitialProps ?

I'm firing an action from getInitialProps but it's not logging on initial page load, but if I navigate to that page by clicking a link to it then it logs as expected.

[NeXTs]

@kolpav

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

->

const composeEnhancers = typeof window != 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

[geryit]

So, I guess final code looks like this

const composeEnhancers = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const initStore = (initialState = exampleInitialState) => {
  return createStore(reducer, initialState, composeEnhancers(applyMiddleware(thunkMiddleware)))
}

[sonhgc00016]

@russelh15 I got the problem, too. Redux dev tool does not show any logs from getInitialProps but client render are normal. Here is my store:

import { createStore, applyMiddleware, compose } from 'redux';
import withRedux from 'next-redux-wrapper';
import reducers from './reducers';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';
import withReduxSaga from './lib/withReduxSaga.js';

export const sagaMiddleware = createSagaMiddleware();

const composeEnhancers = (typeof window != 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

export const initStore = (initialState = {}) => {
    const store = createStore(reducers, initialState, composeEnhancers(applyMiddleware(sagaMiddleware)));

    store.sagaTask = sagaMiddleware.run(rootSaga);

    return store;
};

export const connect = (mapStateToProps, actions = {}) => {
    return component => withRedux(initStore, mapStateToProps, actions)(withReduxSaga(component));
};

[hmontes]

What about this example? https://github.com/zeit/next.js/blob/master/examples/with-apollo-and-redux/lib/initRedux.js

[ChrisWiles]

@sonhgc00016 @russelh15

So any actions fired on server, don't log on DevTools,
remote-redux-devtoolsfixes this.

import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'remote-redux-devtools'

const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 })
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
))

[timneutkens]

That's pretty cool 👌

[sonhgc00016]

@ChrisWiles After config store using remote-redux-devtools all logs includes from getInitialProps show up but I still have problem with websoket WebSocket connection to 'wss://remotedev.io/socketcluster/' failed: Error during WebSocket handshake: Unexpected response code: 503. I try using const composeEnhancers = composeWithDevTools({ realtime: true, port: 3600, suppressConnectErrors: false }); in store.js and

var remotedev = require('remotedev-server');
remotedev({ hostname: 'localhost', port: 3600 });

in server.js but every logs disappear and thown error again. Let me know if you have solution solved it.

[ChrisWiles]

@sonhgc00016 that looks correct. When using remotedev-server you also must set devTools to use custom local server. Might be why the logs are gone.

[sonhgc00016]

@ChrisWiles I can remove config for a custom server but have one problem with a socket that is WebSocket connection to 'wss://remotedev.io/socketcluster/' failed: Error during WebSocket handshake: Unexpected response code: 503. Do you have any solution?

[jonaswindey]

Code for the basic example without middleware:

const devtools = (process.browser && window.__REDUX_DEVTOOLS_EXTENSION__)
  ? window.__REDUX_DEVTOOLS_EXTENSION__()
  : f => f

export const makeStore = (initialState = {...}) => createStore(reducer, initialState, compose(devtools))