React attempted to reuse markup in a container but the checksum was invalid

[tomexa]

I have this error while trying to use Next with redux and redux saga.
We use it exactly the same way as the example 'with-redux-saga', and we dispatch an action that triggers a saga in the getInitialProps function:

static async getInitialProps ({ query, store, isServer }) {
    store.dispatch(ProductsActions.getCategories())
}

When I query the page, it is rendered with the categories displayed, then they disappear and this error is printed in the console...

It all works good when I get the categories through an async await and return them in the props.

More specifically the error reads:

(client)  data-reactid="26"></ul><div class="row"
(server)  data-reactid="26"><li style="flex-grow:

So if I guess correctly the client expects an empty ul meaning NO categories and the server renders the list of categories

Versions:

• nextjs: 3.2.2
• next-redux-saga: 1.0.1
• next-redux-wrapper: 1.3.4
• react: 15.6.1
• react-redux: 5.0.6
• redux: 3.7.2
• redux-sagas: 0.15.6

[lfades]

Is the store in the client the same of the server ? if that's the case you should use a store per request in the server and a single store in the client instead. And if you're using a different store for the client then the dispatch doesn't work as it's going to happen only server side

[hugotox]

do you have an example on how to use a store for the server and another store for the client? Examples I've seen so far seems to be using the same store https://github.com/zeit/next.js/blob/canary/examples/with-redux/store.js

[lfades]

@hugotox that example is using next-redux-wrapper and it makes sure to create a unique store in the server and a new one for the client by using initStore