Redux example's store gets created twice on the server

[j]

Is this on purpose?

getInitialProps() creates a store on the server-side, then on the constructor.

Side note:
I'm trying to use redux-saga and with this example, if you create the store again, things break.

[fdidron]

@j Hi,

I believe it is necessary to create the store on both getInitialProps and the constructor.

getInitialProps returns a Plain javascript Object, so you need to create a store, dispatch whatever actions you need to set to your app's initial state (even async data, since getInitial Props is an async method), then return a Plain representation of this state which is passed to your component via props.

In the component's constructor you retrieve the plain representation of your state via props and pass it to your store.

I'm not very familiar with redux saga, do you have some code to share so I can take a look ?

[MarcPorciuncula]

@j Hi,

Have you seen redux-saga/redux-saga#255 for server side rendering. It's working just fine for me.

This is how I'm doing it:
You run the sagas in getInitialProps and then dispatch actions that load the data you need for the page into the store. You then dispatch an END which cancels all sagas that have paused on a take effect. Sagas that are still doing work will complete their work and then also get cancelled when they yield a take effect. You then await task.done, then return your initial state. When you fire up your sagas in the constructor, and then they run as normal.

You do have to be careful how you write your sagas when doing this, however. Eg. sagas that communicate with each other by dispatching actions are an issue because after you dispatch END they will cancel and no longer be able to react to each other's messages. (You can get around this by using takem which can take END as well as the action you want).

Looking back on that it seems a bit confusing, I can write an example if you want.

[timneutkens]

@j could you check if the above answers / solves your question?

[j]

Hey, sorry, we moved away from next for more flexability and don't have time to try this out. Feel free to close.

…

On Thu, Dec 29, 2016 at 9:06 AM, Tim Neutkens ***@***.***> wrote: @j <https://github.com/j> could you check if the above answers / solves your question? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#273 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAj-Yj_weXrJgtwFjHJc0-90qLaMd_04ks5rM-ingaJpZM4K2I6P> .

[SpencerCDixon]

@MarcoThePoro do you by chance have an example of how to do this properly? I'm running into an issue where actions are getting dispatched twice :/

[SpencerCDixon]

Nevermind.. got it working. For others stuck on this here is what fixed my issue:

export default function withRedux(ReduxComponent) {
  return class ReduxContainer extends React.Component {
    static getInitialProps ({ req }) {
      const isServer = !!req
      const store = initStore(reducer, undefined, isServer)
      sagaMiddleware.run(rootSaga);
      store.dispatch(END);
      return { initialState: store.getState(), isServer }
    }

    constructor (props) {
      super(props)
      this.store = initStore(reducer, props.initialState, props.isServer)
      sagaMiddleware.run(rootSaga);
    }

    render () {
      return (
        <Provider store={this.store}>
          <ReduxComponent {...this.props} />
        </Provider>
      )
    }
  }
}

Might be worth it to write up a recipe for using redux saga with next.js?

[pesakitan22]

@SpencerCDixon glad if you could show me the full example.. mine got stuck

[rwieruch]

Perhaps this article helps to use Redux Saga in NextJs too.