{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/13103","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/13103/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/13103/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/13103/events","html_url":"https://github.com/Automattic/wp-calypso/pull/13103","id":221681094,"number":13103,"title":"Framework: Declarative Data Dependencies","user":{"login":"samouri","id":4656974,"avatar_url":"https://avatars2.githubusercontent.com/u/4656974?v=3","gravatar_id":"","url":"https://api.github.com/users/samouri","html_url":"https://github.com/samouri","followers_url":"https://api.github.com/users/samouri/followers","following_url":"https://api.github.com/users/samouri/following{/other_user}","gists_url":"https://api.github.com/users/samouri/gists{/gist_id}","starred_url":"https://api.github.com/users/samouri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samouri/subscriptions","organizations_url":"https://api.github.com/users/samouri/orgs","repos_url":"https://api.github.com/users/samouri/repos","events_url":"https://api.github.com/users/samouri/events{/privacy}","received_events_url":"https://api.github.com/users/samouri/received_events","type":"User","site_admin":false},"labels":[{"id":542899300,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Size]%20L","name":"[Size] L","color":"550e52","default":false},{"id":285010017,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20In%20Progress","name":"[Status] In Progress","color":"207de5","default":false}],"state":"open","locked":false,"assignee":{"login":"samouri","id":4656974,"avatar_url":"https://avatars2.githubusercontent.com/u/4656974?v=3","gravatar_id":"","url":"https://api.github.com/users/samouri","html_url":"https://github.com/samouri","followers_url":"https://api.github.com/users/samouri/followers","following_url":"https://api.github.com/users/samouri/following{/other_user}","gists_url":"https://api.github.com/users/samouri/gists{/gist_id}","starred_url":"https://api.github.com/users/samouri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samouri/subscriptions","organizations_url":"https://api.github.com/users/samouri/orgs","repos_url":"https://api.github.com/users/samouri/repos","events_url":"https://api.github.com/users/samouri/events{/privacy}","received_events_url":"https://api.github.com/users/samouri/received_events","type":"User","site_admin":false},"assignees":[{"login":"samouri","id":4656974,"avatar_url":"https://avatars2.githubusercontent.com/u/4656974?v=3","gravatar_id":"","url":"https://api.github.com/users/samouri","html_url":"https://github.com/samouri","followers_url":"https://api.github.com/users/samouri/followers","following_url":"https://api.github.com/users/samouri/following{/other_user}","gists_url":"https://api.github.com/users/samouri/gists{/gist_id}","starred_url":"https://api.github.com/users/samouri/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samouri/subscriptions","organizations_url":"https://api.github.com/users/samouri/orgs","repos_url":"https://api.github.com/users/samouri/repos","events_url":"https://api.github.com/users/samouri/events{/privacy}","received_events_url":"https://api.github.com/users/samouri/received_events","type":"User","site_admin":false}],"milestone":null,"comments":1,"created_at":"2017-04-13T21:01:20Z","updated_at":"2017-04-18T08:12:33Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/13103","html_url":"https://github.com/Automattic/wp-calypso/pull/13103","diff_url":"https://github.com/Automattic/wp-calypso/pull/13103.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/13103.patch"},"body":"In Calypso, we know that we want declarative dependencies for our ui components/blocks.  The big question is how?\r\n\r\nMy proposal here is to create a new HoC function, `needs`, that takes the place of both a `connect`, and query components.  Under the hood, needs does a few things:\r\n1. wraps component in a standard React Component that contains all the usual lifecycle hooks\r\n2. the component issues necessary requests for data on both `componentWillMount` and `componentWillReceiveProps`\r\n3. takes the fetched data from the redux tree once it is available and hands it to its children\r\n\r\nExample usage:\r\n```jsx\r\nexport default needs(\r\n    readerSite,\r\n    readerFeed,\r\n )( localize( SiteStream ) );\r\n```\r\n\r\nWhat are these readerSite and readerFeed objects you ask?  They are objects with this shape:\r\n```jsx\r\n{ \r\n  mapStateToProps: ( state, ownProps ) => ( {\r\n    // take redux state & ownProps and return props to give children. identical to what you would put in a connect.\r\n  } ),\r\n  mapStateToRequestActions: ( state, ownProps ) => {\r\n    // take redux state & ownProps --> [ actionsToDispatchForFetchingData... ].  This is most similar to a query component\r\n  }\r\n}\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/294723619","html_url":"https://github.com/Automattic/wp-calypso/pull/13103#issuecomment-294723619","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/13103","id":294723619,"user":{"login":"youknowriad","id":272444,"avatar_url":"https://avatars0.githubusercontent.com/u/272444?v=3","gravatar_id":"","url":"https://api.github.com/users/youknowriad","html_url":"https://github.com/youknowriad","followers_url":"https://api.github.com/users/youknowriad/followers","following_url":"https://api.github.com/users/youknowriad/following{/other_user}","gists_url":"https://api.github.com/users/youknowriad/gists{/gist_id}","starred_url":"https://api.github.com/users/youknowriad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/youknowriad/subscriptions","organizations_url":"https://api.github.com/users/youknowriad/orgs","repos_url":"https://api.github.com/users/youknowriad/repos","events_url":"https://api.github.com/users/youknowriad/events{/privacy}","received_events_url":"https://api.github.com/users/youknowriad/received_events","type":"User","site_admin":false},"created_at":"2017-04-18T08:12:33Z","updated_at":"2017-04-18T08:12:33Z","body":"Nice and simple proposal. It has the advantage of being easy to understand and use. However, I think this is valuable only if we can split big chunks of selectors and actions creators into one need. But I'm afraid that in most cases we'll end up with a single (or two) selector and a single or two actions creators in each \"need\". Please correct if I'm wrong.\r\n\r\nI still feel the best way to declaratively declare data dependencies is using GraphQL or similar and maybe use the library https://github.com/youknowriad/react-graphql-redux and my initial PR about this is https://github.com/Automattic/wp-calypso/pull/9386\r\n\r\nI've not been pushing this way because we have some technical debts (reduxifying, sites-list, ...) we should tackle first before introducing a big change. (Maybe it's time to rethink about it, since we're getting there's an ongoing sites-list dropping project)"}}
{"actor":{"display_login":"youknowriad"}}