{"action":"created","issue":{"url":"https://api.github.com/repos/helpscout/brigade/issues/14","repository_url":"https://api.github.com/repos/helpscout/brigade","labels_url":"https://api.github.com/repos/helpscout/brigade/issues/14/labels{/name}","comments_url":"https://api.github.com/repos/helpscout/brigade/issues/14/comments","events_url":"https://api.github.com/repos/helpscout/brigade/issues/14/events","html_url":"https://github.com/helpscout/brigade/pull/14","id":412728337,"node_id":"MDExOlB1bGxSZXF1ZXN0MjU0ODcxNzEx","number":14,"title":"Introduce StatefulReactView, createStore, and createExternalStateReducer","user":{"login":"brettjonesdev","id":2163045,"node_id":"MDQ6VXNlcjIxNjMwNDU=","avatar_url":"https://avatars3.githubusercontent.com/u/2163045?v=4","gravatar_id":"","url":"https://api.github.com/users/brettjonesdev","html_url":"https://github.com/brettjonesdev","followers_url":"https://api.github.com/users/brettjonesdev/followers","following_url":"https://api.github.com/users/brettjonesdev/following{/other_user}","gists_url":"https://api.github.com/users/brettjonesdev/gists{/gist_id}","starred_url":"https://api.github.com/users/brettjonesdev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brettjonesdev/subscriptions","organizations_url":"https://api.github.com/users/brettjonesdev/orgs","repos_url":"https://api.github.com/users/brettjonesdev/repos","events_url":"https://api.github.com/users/brettjonesdev/events{/privacy}","received_events_url":"https://api.github.com/users/brettjonesdev/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2019-02-21T03:11:45Z","updated_at":"2019-02-26T22:24:37Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/helpscout/brigade/pulls/14","html_url":"https://github.com/helpscout/brigade/pull/14","diff_url":"https://github.com/helpscout/brigade/pull/14.diff","patch_url":"https://github.com/helpscout/brigade/pull/14.patch"},"body":"This PR introduces the new `StatefulReactView`, a lightweight extension of the `ReactView` which works by being passed a Redux `store`, which is renders inside a `<Provider>`. \r\n\r\n## `createStore`\r\nThis is a lightweight utility which allows you to quickly and easily create Redux stores. It is a simple convenience method which sets you up with thunk and `extraArgument`. \r\n\r\n## `createExternalStateReducer`\r\nThis utility allows you to create a Redux reducer slice which can be controlled externally. The idea is that applications which still have logic that lives inside Backbone models and collections could inject those pieces of state into the store of an application which otherwise relies entirely on Redux to manage its state. See the tests for usage. \r\n\r\nCheck out the External State vs Internal State examples in Storybook to learn more! They are identical ToDo Apps, showcasing how the same `StatefulReactView` could be used for a purely Redux application, as well as a \"hybrid\" application where a piece of the Redux state is externally derived and controlled from outside. Note that their components are essentially identical. The idea would be that an application would be initially written like the External State example, leveraging backbone for some state management, then be refactored to be like the Internal State example, where all state management resides inside Redux. \r\n\r\n## Progression\r\nInside `hs-app`, we want to slowly replace our Backbone code with React/Redux components. We have many components being controlled by Backbone at a low- or medium-level, and one (Chat) which is a standalone Redux application with a minimal Backbone interface. Over time, we'd like React components which currently exist at a low level inside Backbone applications to move up and consume their Backbone parents, in a kind of [reverse Saturn](https://en.wikipedia.org/wiki/Saturn_Devouring_His_Son). \r\n\r\nAfter much discussion with @knicklabs, we envision a Backbone -> React transition that looks like this:\r\n\r\n### Current\r\nAlmost all of our React components living inside hs-app use `ReactMounter` to interface with basic React components. `ReactMounter` is quick and easy to use, but it's very opinionated, and doesn't provide a clear path to transition to being more React-powered. This way of building React components inside Backbone will be considered deprecated moving forward.\r\n\r\nWe also have a very basic `ReactView` which provides the simplest interface - a single View which wraps a single Component and allows you to pass any props you like into the Component; essentially replacing handlebars with React as a templating engine. \r\n\r\nLastly, we have the Chat App. The Chat App represents the highest-level of React-ification, short of React-only green field development for new features. Chat App works by having a Marionette Controller initialize a Redux store with preloaded state and `extraArgument`, allowing a tightly controlled point of articulation between React and Backbone. \r\n\r\n### Future\r\nOver time, disparate one-off React components in a Backbone page should give way to larger React portions, and eventually subsume the entire SPA, with `ReactRouter` replacing the Backbone `Router` as the final stage. We picture the progression looking like this: \r\n\r\n* Simple, vanilla React components inside Backbone: `ReactView`\r\n* More complex components leveraging a Redux store, but still backed by state that lives in Backbone models and collections: `StatefulReactView` + `createExternalStateReducer`\r\n* Complex components using Redux, with NO state living in Backbone: `StatefulReactView` \r\n* Fully React applications: No Backbone, just `ReactRouter`, `Redux` and `React` \r\n\r\n"},"comment":{"url":"https://api.github.com/repos/helpscout/brigade/issues/comments/467639244","html_url":"https://github.com/helpscout/brigade/pull/14#issuecomment-467639244","issue_url":"https://api.github.com/repos/helpscout/brigade/issues/14","id":467639244,"node_id":"MDEyOklzc3VlQ29tbWVudDQ2NzYzOTI0NA==","user":{"login":"brettjonesdev","id":2163045,"node_id":"MDQ6VXNlcjIxNjMwNDU=","avatar_url":"https://avatars3.githubusercontent.com/u/2163045?v=4","gravatar_id":"","url":"https://api.github.com/users/brettjonesdev","html_url":"https://github.com/brettjonesdev","followers_url":"https://api.github.com/users/brettjonesdev/followers","following_url":"https://api.github.com/users/brettjonesdev/following{/other_user}","gists_url":"https://api.github.com/users/brettjonesdev/gists{/gist_id}","starred_url":"https://api.github.com/users/brettjonesdev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brettjonesdev/subscriptions","organizations_url":"https://api.github.com/users/brettjonesdev/orgs","repos_url":"https://api.github.com/users/brettjonesdev/repos","events_url":"https://api.github.com/users/brettjonesdev/events{/privacy}","received_events_url":"https://api.github.com/users/brettjonesdev/received_events","type":"User","site_admin":false},"created_at":"2019-02-26T22:24:37Z","updated_at":"2019-02-26T22:24:37Z","author_association":"COLLABORATOR","body":"OK folks, after some conversations with @ItsJonQ I've updated the API just a bit to make things simpler. The `createStore` will now automatically call our `combineReducers` method for you behind the scenes, creating auto-bound external reducers wherever it finds a Model or Collection in the `reducers` map. \r\n\r\nI've updated the docs a bit to make things a bit more clear and highlight the happy path. "}}
{"actor":{"display_login":"brettjonesdev"}}