{"action":"created","issue":{"url":"https://api.github.com/repos/cheton/react-sortable/issues/1","repository_url":"https://api.github.com/repos/cheton/react-sortable","labels_url":"https://api.github.com/repos/cheton/react-sortable/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/cheton/react-sortable/issues/1/comments","events_url":"https://api.github.com/repos/cheton/react-sortable/issues/1/events","html_url":"https://github.com/cheton/react-sortable/issues/1","id":139955124,"number":1,"title":"Passing Model via .props rather than .state / Syncing with Redux or other Flux implementation","user":{"login":"jakedowns","id":1683122,"avatar_url":"https://avatars.githubusercontent.com/u/1683122?v=3","gravatar_id":"","url":"https://api.github.com/users/jakedowns","html_url":"https://github.com/jakedowns","followers_url":"https://api.github.com/users/jakedowns/followers","following_url":"https://api.github.com/users/jakedowns/following{/other_user}","gists_url":"https://api.github.com/users/jakedowns/gists{/gist_id}","starred_url":"https://api.github.com/users/jakedowns/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jakedowns/subscriptions","organizations_url":"https://api.github.com/users/jakedowns/orgs","repos_url":"https://api.github.com/users/jakedowns/repos","events_url":"https://api.github.com/users/jakedowns/events{/privacy}","received_events_url":"https://api.github.com/users/jakedowns/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cheton/react-sortable/labels/enhancement","name":"enhancement","color":"84b6eb"},{"url":"https://api.github.com/repos/cheton/react-sortable/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-03-10T17:14:06Z","updated_at":"2016-04-08T15:38:31Z","closed_at":null,"body":"Hello & thanks for a great component!\r\nWorking on integrating it with my project now.\r\n\r\nOne thing I'm curious about is a scenario where I'm passing my would-be model to my component via props (via Redux), but the HoC is expecting my model to be available via state.\r\n\r\nFor now, I'm going to add some glue to keep my component's state up-to-date with the props being passed in. But it seems like an anti-pattern.\r\n\r\nWondering if you had any thoughts or experience wiring this up to a Flux implementation?\r\n\r\nMy gut feeling is that it would be nice to specify whether the model is on state or props... Maybe something like options.modelContainer: 'props' // default: 'state'\r\n\r\nSeems like I should be able to update Redux using an action dispatcher call using one of the provided callback options.\r\n\r\nAnyway, thanks again.\r\n\r\n*Update*: just noticed the store option... might be able to use this...\r\n\r\n*Update 2*: I ended up switching to https://github.com/gaearon/react-dnd, which definitely has a little bit of a learning curve to it compared to the simplicity of react-sortable. But ultimately, I found it more flexible for what I was trying to achieve."},"comment":{"url":"https://api.github.com/repos/cheton/react-sortable/issues/comments/207483616","html_url":"https://github.com/cheton/react-sortable/issues/1#issuecomment-207483616","issue_url":"https://api.github.com/repos/cheton/react-sortable/issues/1","id":207483616,"user":{"login":"cheton","id":447801,"avatar_url":"https://avatars.githubusercontent.com/u/447801?v=3","gravatar_id":"","url":"https://api.github.com/users/cheton","html_url":"https://github.com/cheton","followers_url":"https://api.github.com/users/cheton/followers","following_url":"https://api.github.com/users/cheton/following{/other_user}","gists_url":"https://api.github.com/users/cheton/gists{/gist_id}","starred_url":"https://api.github.com/users/cheton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cheton/subscriptions","organizations_url":"https://api.github.com/users/cheton/orgs","repos_url":"https://api.github.com/users/cheton/repos","events_url":"https://api.github.com/users/cheton/events{/privacy}","received_events_url":"https://api.github.com/users/cheton/received_events","type":"User","site_admin":false},"created_at":"2016-04-08T15:38:31Z","updated_at":"2016-04-08T15:38:31Z","body":"Thanks to @falzhobel. I finally had a chance to refactor the whole thing.\r\nNow there will be no <b>state</b> within the sortable component, and the <b>model</b> option is no longer needed as well. You only have to pass a `onChange` callback to update items to the store. For example:\r\n\r\n```js\r\n<MySortableComponent\r\n    items={[1, 2, 3, 4, 5, 6]}\r\n    // @param {array} items A array of items.\r\n    // @param {object} sortable The sortable instance.\r\n    onChange={(items, sortable) => {\r\n        // Update items to the store\r\n    }}\r\n/>\r\n```\r\n\r\nYou can check the updated code in the [dev](https://github.com/cheton/react-sortable/tree/dev) branch \r\nhttps://github.com/cheton/react-sortable/blob/dev/src/index.jsx\r\n\r\nI will push the changes to master branch later."}}