{"action":"opened","issue":{"url":"https://api.github.com/repos/gaearon/redux-thunk/issues/90","repository_url":"https://api.github.com/repos/gaearon/redux-thunk","labels_url":"https://api.github.com/repos/gaearon/redux-thunk/issues/90/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/redux-thunk/issues/90/comments","events_url":"https://api.github.com/repos/gaearon/redux-thunk/issues/90/events","html_url":"https://github.com/gaearon/redux-thunk/issues/90","id":172881775,"number":90,"title":"Different behavior when dispatching async actions in React component and Redux store","user":{"login":"dcefram","id":687325,"avatar_url":"https://avatars.githubusercontent.com/u/687325?v=3","gravatar_id":"","url":"https://api.github.com/users/dcefram","html_url":"https://github.com/dcefram","followers_url":"https://api.github.com/users/dcefram/followers","following_url":"https://api.github.com/users/dcefram/following{/other_user}","gists_url":"https://api.github.com/users/dcefram/gists{/gist_id}","starred_url":"https://api.github.com/users/dcefram/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dcefram/subscriptions","organizations_url":"https://api.github.com/users/dcefram/orgs","repos_url":"https://api.github.com/users/dcefram/repos","events_url":"https://api.github.com/users/dcefram/events{/privacy}","received_events_url":"https://api.github.com/users/dcefram/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-08-24T07:21:02Z","updated_at":"2016-08-24T07:21:02Z","closed_at":null,"body":"Given than I can just move my logic to the component (component will execute two async actions), but I'm just wondering why is it that the behavior in a React component different from the behavior on another async action.\r\n\r\nTo make things clearer, here's a sample code:\r\n\r\n```\r\nexport function selectEntry(id) {\r\n    return dispatch => {\r\n        return fetch(someUrlHere).then(res => {\r\n            return dispatch({ type: SELECT_ENTRY, res });\r\n        });\r\n    };\r\n}\r\n\r\nexport function deleteEntry(id) {\r\n    return (dispatch, getState) => {\r\n        const { articles } = getState();\r\n\r\n        if (id === articles.selectedEntry) {\r\n            return dispatch(selectEntry(id - 1))\r\n                .then(() => dispatch({ type: DELETE_ENTRY, id })); // This line will immediately execute even though selectEntry hasn't yet resolved.\r\n        }\r\n\r\n        return dispatch({ type: DELETE_ENTRY, id });\r\n    };\r\n}\r\n```\r\n\r\nThe above code can cause an error (delete entry's reducer logic would be executed first before select entry's reducer logic)\r\n\r\nHowever, if you do that in a React Component, it would work as I would expect:\r\n\r\n```\r\nexport function selectEntry(id) {\r\n    return dispatch => {\r\n        return fetch(someUrlHere).then(res => {\r\n            return dispatch({ type: SELECT_ENTRY, res });\r\n        });\r\n    };\r\n}\r\n\r\nexport function deleteEntry(id) {\r\n    return (dispatch, getState) => {\r\n        const { articles } = getState();\r\n\r\n        return dispatch({ type: DELETE_ENTRY, id });\r\n    };\r\n}\r\n\r\n// REACT COMPONENT'S METHOD\r\nexport TestComponent extends Component {\r\n    constructor() {\r\n        //...\r\n    }\r\n\r\n    onDelete(id) {\r\n        if (id === this.props.selectedEntry) {\r\n            this.props.actions.selectEntry(id - 1)\r\n                .then(() => deleteEntry(id)); // Works perfectly, this line will only execute this action after selectEntry's reducer is done :)\r\n        } else {\r\n            deleteEntry(id);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        // something something\r\n    }\r\n}\r\n```\r\n\r\nCan anyone enlighten me as to why the behaviors of the two approach different? Or maybe I'm doing something wrong."}}
{"actor":{"display_login":"dcefram"}}