grrowl / redux-scuttlebutt

Distributed replicated redux store
170 stars 14 forks source link

using with connect() #6

Closed moimikey closed 8 years ago

moimikey commented 8 years ago

I'm having some trouble figuring out how to use this with connect. is it possible?

Uncaught TypeError: Cannot read property 'connect' of undefined(…)

my scenario:

// webpack dev server
new WebpackDevServer(webpack(config(process.env.NODE_ENV)), {
...
  setup(app) {
    startScuttlebutt(require('http').Server(app))
    log('[GSP] Scuttlebutt started.')
  }
...
// configure store (fn -> store)
import scuttlebutt from 'redux-scuttlebutt'
...
  const sharedEnhancers = compose(
    applyMiddleware(...middleware, routerMiddleware(history)),
    scuttlebutt()
    ...
  )
...
    finalCreateStore = compose(
      sharedEnhancers,
      devTools
    )(createStore)
...
  const store = finalCreateStore(
    require('./reducers').default,
    Object.create(null)
  )
...
  return store
// index
export const store = configureStore()
store.subscribe(start)
...
const Application = store => {
  return (
    <Provider store={store} key="provider">
      <AppContainer>
        <Router history={history} routes={routes} />
      </AppContainer>
    </Provider>
  )
}
...
let start = () => render(
  <Application store={store} />,
  rootEl
)
moimikey commented 8 years ago

ahh... i need primus. nearly there... updated my webpack setup:

  setup(app) {
    app.get('/primus/primus.js', (req, res) => {
      const primus = new Primus(new EventEmitter(), {})
      res.charset = 'UTF-8'
      res.setHeader('content-type', 'text/javascript')
      res.send(primus.library())
    })
    dispatcher(require('http').Server(app))
    log('[GSP] Scuttlebutt started.')
  }

but now i get this, so trying to solve it:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Router component.
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Router component.
moimikey commented 8 years ago

ah so my thoughts on this now is that i'm having some disconnect between redux-scuttlebutt and my async with code-splitting goodness react-router routes.

moimikey commented 8 years ago

another update, fixed after removing store.subscribe(start) but now the websocket disconnects everytime it starts, so debugging that now.

WebSocket connection to 'ws://localhost:3000/primus?_primuscb=LX62OPi' failed: WebSocket is closed before the connection is established
moimikey commented 8 years ago

ah. websocket proto is not respnding. hm.

moimikey commented 8 years ago

eyeroll figured it out finally...

const server = new WebpackDevServer(webpack(config(process.env.NODE_ENV)), {
...
  setup(app) {
    app.get('/primus/primus.js', (req, res) => {
      let primus = new Primus(new EventEmitter)
      res.charset = 'UTF-8'
      res.setHeader('content-type', 'text/javascript')
      res.send(primus.library())
    })
  }
}).listen(SERVER_PORT, SERVER_HOST, err => {
...
dispatcher(server)
log('[GSP] Scuttlebutt started.')

i had to pass the webpack-dev-server instance with listen to the dispatcher, otherwise it had no port to bind to. :|.

i hope this thread helps someone else.