{"action":"created","issue":{"url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/issues/24","labels_url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/issues/24/comments","events_url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/issues/24/events","html_url":"https://github.com/thereactivestack/meteor-react-router-ssr/pull/24","id":123647071,"number":24,"title":"Redux integration","user":{"login":"yched","id":193080,"avatar_url":"https://avatars.githubusercontent.com/u/193080?v=3","gravatar_id":"","url":"https://api.github.com/users/yched","html_url":"https://github.com/yched","followers_url":"https://api.github.com/users/yched/followers","following_url":"https://api.github.com/users/yched/following{/other_user}","gists_url":"https://api.github.com/users/yched/gists{/gist_id}","starred_url":"https://api.github.com/users/yched/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yched/subscriptions","organizations_url":"https://api.github.com/users/yched/orgs","repos_url":"https://api.github.com/users/yched/repos","events_url":"https://api.github.com/users/yched/events{/privacy}","received_events_url":"https://api.github.com/users/yched/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":21,"created_at":"2015-12-23T11:59:31Z","updated_at":"2016-01-06T09:51:46Z","closed_at":"2015-12-29T15:05:30Z","pull_request":{"url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/pulls/24","html_url":"https://github.com/thereactivestack/meteor-react-router-ssr/pull/24","diff_url":"https://github.com/thereactivestack/meteor-react-router-ssr/pull/24.diff","patch_url":"https://github.com/thereactivestack/meteor-react-router-ssr/pull/24.patch"},"body":"As per the discussion in https://github.com/thereactivestack/kickstart-hugeapp/issues/27, here's a proposal for optional redux support :\r\n\r\nUsage : \r\nBehavior is triggered by a 'createReduxStore' callback in clientOptions / serverOptions.\r\nA 'wrapper' is also required, and it should be the react-redux `<Provider>` (or some custom component wrapping it)\r\n\r\n```js\r\nimport { Provider } from 'react-redux'\r\nimport routes from './myAppRoutes'\r\nimport createStore from './myAppStore'\r\n\r\nMeteor.startup(() => {\r\n  const clientOptions = {\r\n    wrapper: Provider, // Or some custom Component wrapping the redux Provider\r\n    createReduxStore: (initialState, history) => {\r\n      const store = createStore(initialState);\r\n      // If using redux-simple-router, this is where you can bind the history with syncReduxAndRouter\r\n      syncReduxAndRouter(history, store);\r\n      return store;\r\n    }\r\n  });\r\n  // Use the same 'wrapper' and 'createReduxStore' in serverOptions, or adjust to your needs.\r\n  const serverOptions = clientOptions;\r\n  ReactRouterSSR.Run(routes, clientOptions, serverOptions);\r\n});\r\n```\r\n\r\nIn detail, if options.createReduxStore callback is set :\r\n\r\nOn the server :\r\n- After route is resolved and before rendering\r\n  - create the store, passing a history to let the callback bind with redux-simple-router if it needs to\r\n  - allow data fetching : let the components for the route fire actions (possibly async / Promise-based) to populate the store, and wait for them to be done.\r\n    (see bottom of http://rackt.org/redux/docs/recipes/ServerRendering.html - implementation is inspired from https://github.com/erikras/react-redux-universal-hot-example)\r\n  - pass the store as a prop to the wrapper component (the redux `<Provider>`)\r\n- After rendering,\r\n  - grab the resulting store state and pass it in the HTML (using meteorhacks:inject-data)\r\n\r\nOn the client :\r\n- Before rendering \r\n  - create the store with the initial state populated from the server (if any)\r\n  - pass the store as a prop to the wrapper component (the redux `<Provider>`)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/issues/comments/169280167","html_url":"https://github.com/thereactivestack/meteor-react-router-ssr/pull/24#issuecomment-169280167","issue_url":"https://api.github.com/repos/thereactivestack/meteor-react-router-ssr/issues/24","id":169280167,"user":{"login":"yched","id":193080,"avatar_url":"https://avatars.githubusercontent.com/u/193080?v=3","gravatar_id":"","url":"https://api.github.com/users/yched","html_url":"https://github.com/yched","followers_url":"https://api.github.com/users/yched/followers","following_url":"https://api.github.com/users/yched/following{/other_user}","gists_url":"https://api.github.com/users/yched/gists{/gist_id}","starred_url":"https://api.github.com/users/yched/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yched/subscriptions","organizations_url":"https://api.github.com/users/yched/orgs","repos_url":"https://api.github.com/users/yched/repos","events_url":"https://api.github.com/users/yched/events{/privacy}","received_events_url":"https://api.github.com/users/yched/received_events","type":"User","site_admin":false},"created_at":"2016-01-06T09:51:46Z","updated_at":"2016-01-06T09:51:46Z","body":"@dbismut : hm, I don't seem to have that issue on my sample app.\r\nI remember having similar issues when using a history object created with the \"usual\" createHistory(), which assumes a browser, but the server-side version of ReactRouterSSR now uses createMemoryHistory(), which works fine.\r\n\r\nCan you provide a more detailed callstack for the \"window is not defined\" error ?\r\n(also, which versions of redux-simple-router / react-router / history do you use ?)\r\n\r\nMy take is that using syncReduxAndRouter() on the server-side as well is useful because it lets the \"@@router/INIT_PATH\" action get fired once routing is resolved, and correctly populates the store's 'routing' element with the expected info before your route component gets rendered, just like it would be on the client."}}