{"action":"created","issue":{"url":"https://api.github.com/repos/gaearon/react-redux/issues/1","labels_url":"https://api.github.com/repos/gaearon/react-redux/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/react-redux/issues/1/comments","events_url":"https://api.github.com/repos/gaearon/react-redux/issues/1/events","html_url":"https://github.com/gaearon/react-redux/issues/1","id":94513087,"number":1,"title":"Alternative API proposals","user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2015-07-11T22:34:38Z","updated_at":"2015-07-12T04:17:31Z","closed_at":null,"body":"This API is taken from Redux `<Provider>`, `<Connector>`, `@provide`, `@connect`.\r\nRight now I don't have examples in this repo but it matches what you've seen in Redux so far.\r\n\r\nIt's the best we've got now, but I think we can do better!\r\n\r\nCommon pain points:\r\n\r\n* Not intuitive how way to separate smart and dumb components with `<Connector>`, `@connect`\r\n* You have to manually bind action creators with `bindActionCreators` helper which [some don't like](https://github.com/gaearon/redux/pull/86)\r\n* Too much nesting for small examples (`<Provider>`, `<Connector>` both need function children)\r\n\r\nLet's go wild here. Post your alternative API suggestions.\r\n\r\nThey should satisfy the following criteria:\r\n\r\n* Some component at the root must hold the `store` instance. (Akin to `<Provider>`)\r\n* It should be possible to connect to state no matter how deep in the tree\r\n* It should be possible to select the state you're interested in with a `select` function\r\n* Smart / dumb components separation needs to be encouraged\r\n* There should be one obvious way to separate smart / dumb components\r\n* It should be obvious how to turn your functions into action creators\r\n* Smart components should probably be able to react to updates to the state in `componentDidUpdate`\r\n* Smart components' `select` function needs to be able to take their props into account\r\n* Smart component should be able to do something before/after dumb component dispatches an action\r\n* We should have `shouldComponentUpdate` wherever we can"},"comment":{"url":"https://api.github.com/repos/gaearon/react-redux/issues/comments/120685246","html_url":"https://github.com/gaearon/react-redux/issues/1#issuecomment-120685246","issue_url":"https://api.github.com/repos/gaearon/react-redux/issues/1","id":120685246,"user":{"login":"acdlite","id":3624098,"avatar_url":"https://avatars.githubusercontent.com/u/3624098?v=3","gravatar_id":"","url":"https://api.github.com/users/acdlite","html_url":"https://github.com/acdlite","followers_url":"https://api.github.com/users/acdlite/followers","following_url":"https://api.github.com/users/acdlite/following{/other_user}","gists_url":"https://api.github.com/users/acdlite/gists{/gist_id}","starred_url":"https://api.github.com/users/acdlite/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acdlite/subscriptions","organizations_url":"https://api.github.com/users/acdlite/orgs","repos_url":"https://api.github.com/users/acdlite/repos","events_url":"https://api.github.com/users/acdlite/events{/privacy}","received_events_url":"https://api.github.com/users/acdlite/received_events","type":"User","site_admin":false},"created_at":"2015-07-12T04:17:31Z","updated_at":"2015-07-12T04:17:31Z","body":"@ryancole I still think bindActionCreators (or some equivalent) is useful. You shouldn't pass `dispatch()` to a dumb component; you should bind it in a smart component first. E.g. you dumb components should look like this:\r\n\r\n```js\r\nclass CounterButton extends Component {\r\n  render() {\r\n    const { increment } = this.props;\r\n    <button onClick={increment} />; \r\n  }\r\n}\r\n```\r\n\r\nRather than this:\r\n\r\n```js\r\nclass CounterButton extends Component {\r\n  render() {\r\n    const { dispatch } = this.props;\r\n    <button onClick={dispatch(increment())} />; \r\n  }\r\n}\r\n```\r\n\r\nIt may seem like a trivial difference, but the first version is more separated from the implementation details of how it receives its callback. This leads to more scalable, maintainable, testable code.\r\n\r\n> It'd be cool if you could just import your action methods and call them, no?\r\n\r\nYou have to bind them *somewhere*. Remember, action creators in Redux are simple pure functions. Either we bind them in smart components, or we have to bind them at store creation time, in which case we'd need some sort of API for accessing the bound components. Or you use singletons, but yuck."}}