{"action":"created","issue":{"url":"https://api.github.com/repos/shakacode/react_on_rails/issues/215","repository_url":"https://api.github.com/repos/shakacode/react_on_rails","labels_url":"https://api.github.com/repos/shakacode/react_on_rails/issues/215/labels{/name}","comments_url":"https://api.github.com/repos/shakacode/react_on_rails/issues/215/comments","events_url":"https://api.github.com/repos/shakacode/react_on_rails/issues/215/events","html_url":"https://github.com/shakacode/react_on_rails/pull/215","id":127814071,"number":215,"title":"Support multiple components on a page using the same Redux store","user":{"login":"justin808","id":1118459,"avatar_url":"https://avatars.githubusercontent.com/u/1118459?v=3","gravatar_id":"","url":"https://api.github.com/users/justin808","html_url":"https://github.com/justin808","followers_url":"https://api.github.com/users/justin808/followers","following_url":"https://api.github.com/users/justin808/following{/other_user}","gists_url":"https://api.github.com/users/justin808/gists{/gist_id}","starred_url":"https://api.github.com/users/justin808/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/justin808/subscriptions","organizations_url":"https://api.github.com/users/justin808/orgs","repos_url":"https://api.github.com/users/justin808/repos","events_url":"https://api.github.com/users/justin808/events{/privacy}","received_events_url":"https://api.github.com/users/justin808/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/shakacode/react_on_rails/labels/work-in-progress","name":"work-in-progress","color":"fef2c0"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/shakacode/react_on_rails/milestones/7","html_url":"https://github.com/shakacode/react_on_rails/milestones/2.2","labels_url":"https://api.github.com/repos/shakacode/react_on_rails/milestones/7/labels","id":1529145,"number":7,"title":"2.2","description":null,"creator":{"login":"justin808","id":1118459,"avatar_url":"https://avatars.githubusercontent.com/u/1118459?v=3","gravatar_id":"","url":"https://api.github.com/users/justin808","html_url":"https://github.com/justin808","followers_url":"https://api.github.com/users/justin808/followers","following_url":"https://api.github.com/users/justin808/following{/other_user}","gists_url":"https://api.github.com/users/justin808/gists{/gist_id}","starred_url":"https://api.github.com/users/justin808/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/justin808/subscriptions","organizations_url":"https://api.github.com/users/justin808/orgs","repos_url":"https://api.github.com/users/justin808/repos","events_url":"https://api.github.com/users/justin808/events{/privacy}","received_events_url":"https://api.github.com/users/justin808/received_events","type":"User","site_admin":false},"open_issues":3,"closed_issues":1,"state":"open","created_at":"2016-01-21T00:10:49Z","updated_at":"2016-01-28T05:46:31Z","due_on":null,"closed_at":null},"comments":8,"created_at":"2016-01-20T23:59:33Z","updated_at":"2016-02-08T18:24:52Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/shakacode/react_on_rails/pulls/215","html_url":"https://github.com/shakacode/react_on_rails/pull/215","diff_url":"https://github.com/shakacode/react_on_rails/pull/215.diff","patch_url":"https://github.com/shakacode/react_on_rails/pull/215.patch"},"body":"## Multiple React Components on a Page with One Store\r\nYou may wish to have 2 React components share the same the Redux store. For example, suppose you want a React component for your header, and underneath the header, you might have a conventional Rails page or another React component. With 2 React components, header and body ones, we'd like them both to share the same Rails view props hydrated Redux store, and we'd like this to all work with Turbolinks to minimize reloading the JavaScript. In the below examples, suppose our Redux store is called appStore, and you have 2 React top level components, \"Comments\" and \"Blogs\". You might be wondering on why we'd want to do this. Here's a few reasons:\r\n\r\n1. As much as we love React and Redux, it's still way slower and more expensive than creating simple pages using standard Rails. We like the hybrid approach where we can focus on React + Redux for super high fidelity UX, while using Rails for simpler needs.\r\n2. We want a React component for the header as we plan to have notification indicators in our header.\r\n\r\nMain Layout:\r\n```erb\r\n  <% redux_store(\"appStore\", props) %>;\r\n  <%= render_component(\"Header\") %>\r\n  yield\r\n```\r\n\r\nComments \"App\" view\r\n```erb\r\n  <%= render_component(\"Comments\") %>\r\n```\r\n\r\nBlog \"App\" view\r\n```erb\r\n  <%= render_component(\"Blogs\") %>\r\n```\r\n\r\nInside your ReactOnRails registered component definition, where you'd normally do the store hookup, you instead get the store from ReactOnRails, like this:\r\n\r\n```js\r\n  // getStore will initialize the store if not already initialized, so creates or retrieves store\r\n  const appStore = ReactOnRails.getStore(\"appStore\");\r\n  return (\r\n    <Provider store={appStore}>\r\n      <NonRouterCommentsContainer />\r\n    </Provider>\r\n  );\r\n```\r\n\r\nIn either your store definition or your registration files, supposing you created a store called `appStore`, you will call:\r\n\r\n```\r\nReactOnRails.registerStore({\r\n  appStore\r\n});\r\n```\r\n\r\nNote, this is a **storeCreator**, meaning that it is a function that takes props and returns a store.\r\n\r\nSo what will be happening?\r\n\r\nThe view helper `initialize_store(store_name, props)` will replace any cached value of store and rebuilds store by calling the storeGenerator with the props passed from Rails. This will be done with inline JavaScript to ensure that it happens after the page loaded/changed callback from the DOM or TurboLinks, which then renders the components.\r\n\r\nThen the components are created as \"pure render functions\" (aka generator functions) which means they take props and return a React.Component. In the case of using `initializeStore`, we will not be passing any props to the component. The component will instead call this to get the store.\r\n\r\n```js\r\nconst store = ReactOnRails.getStore(\"appStore\");\r\n```\r\n\r\nNote, we will not be doing any partial updates to the Redux store. When the page content loads, we will rehydrate the store with whatever props are placed on the page.\r\n\r\n<!-- Reviewable:start -->\r\n[<img src=\"https://reviewable.io/review_button.png\" height=40 alt=\"Review on Reviewable\"/>](https://reviewable.io/reviews/shakacode/react_on_rails/215)\r\n<!-- Reviewable:end -->\r\n"},"comment":{"url":"https://api.github.com/repos/shakacode/react_on_rails/issues/comments/181509956","html_url":"https://github.com/shakacode/react_on_rails/pull/215#issuecomment-181509956","issue_url":"https://api.github.com/repos/shakacode/react_on_rails/issues/215","id":181509956,"user":{"login":"alexfedoseev","id":4244251,"avatar_url":"https://avatars.githubusercontent.com/u/4244251?v=3","gravatar_id":"","url":"https://api.github.com/users/alexfedoseev","html_url":"https://github.com/alexfedoseev","followers_url":"https://api.github.com/users/alexfedoseev/followers","following_url":"https://api.github.com/users/alexfedoseev/following{/other_user}","gists_url":"https://api.github.com/users/alexfedoseev/gists{/gist_id}","starred_url":"https://api.github.com/users/alexfedoseev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alexfedoseev/subscriptions","organizations_url":"https://api.github.com/users/alexfedoseev/orgs","repos_url":"https://api.github.com/users/alexfedoseev/repos","events_url":"https://api.github.com/users/alexfedoseev/events{/privacy}","received_events_url":"https://api.github.com/users/alexfedoseev/received_events","type":"User","site_admin":false},"created_at":"2016-02-08T18:24:52Z","updated_at":"2016-02-08T18:24:52Z","body":"Looks awesome! Let's try it out :+1: \n\n---\n\nReview status: 0 of 44 files reviewed at latest revision, 1 unresolved discussion.\n\n---\n\n\n\n*Comments from the [review on Reviewable.io](https://reviewable.io:443/reviews/shakacode/react_on_rails/215#-:-KA17ATfjQ1elaGYvCGi:1618958574)*\n<!-- Sent from Reviewable.io -->\n"}}