KELiON / redux-async-initial-state

Redux middleware that helps you load redux initial state asynchronously
MIT License
114 stars 12 forks source link

How would I use this with socket.io? #4

Open justinireland opened 8 years ago

justinireland commented 8 years ago

I'm a little confused by the documentation how I would go about using this for a socket event instead of a fetch request.

For example, I am using socket.io and have setup a special channel called 'getInitialState' to hydrate the initialState from the server. I'm also using socketIoMiddleware for dispatching actions to the server.

The following code doesnt seem to ever resolve even though I have verified the server is emitting the initialState object.

const reducer = asyncInitialState.outerReducer(combineReducers({
    ...rootReducer,
    asyncInitialState: asyncInitialState.innerReducer,
}))

socket.emit('getInitialState')

const loadStore = () => {
    return new Promise(resolve => {
        socket.on('getInitialState', (initialState) => resolve(initialState))
    })
}

const storeCreator = applyMiddleware(
    asyncInitialState.middleware(loadStore),
    socketIoMiddleware(socket)
)
const store = storeCreator(reducer)
KELiON commented 8 years ago

@justinireland Hello! For me your code looks good. I have few questions:

1) What do you have in rootReducer? Make sure that it is object with functions in values, but not real reducer function. 2) You've verified that the server is emitting the initialState object, but can you make sure that you are subscribing to this channel before you receive this message? If so replacing subscriber to socket.on('getInitialState', (initialState) => console.log(initialState)) should show your initial state in console 3) If you see your initial state in console, do you see some errors there? Do you see action redux-async-initial-state/STATE_LOADING_DONE in redux logger?

justinireland commented 8 years ago

1) my rootReducer is the combined export of my redux modules - not the result of combineReducers() because I see you are doing that in outerReducer(). 2) If I try to put the emitter in the loadStore function like this:

const loadStore = () => {
    socket.emit('getInitialState')
    return new Promise(resolve => {
        socket.on('getInitialState', (initialState) => {
            console.log(initialState)
            return (initialState)
        })
            .then(resolve)
    })
}

the emit event never even fires. I suspect the problem is mostly related in how I am trying to emit and subscribe to the channel. I'm not very familiar with promises so I may be doing something obviously wrong. 3) It probably doesnt help that I am not using a redux logger and simply trying to debug in the console...

KELiON commented 8 years ago

@justinireland so, as I said probably you are subscribing to this event after it is fired. I'd try to do something like this:

const initialStatePromise = new Promise(resolve => {
  socket.on('getInitialState', resolve);
});

const loadStore = () => {
  socket.emit('getInitialState');
  return initialStatePromise;
};