{"action":"created","issue":{"url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/87","repository_url":"https://api.github.com/repos/tshaddix/react-chrome-redux","labels_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/87/labels{/name}","comments_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/87/comments","events_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/87/events","html_url":"https://github.com/tshaddix/react-chrome-redux/issues/87","id":241449697,"number":87,"title":"Help needed with async actions","user":{"login":"sardaukar","id":153407,"avatar_url":"https://avatars1.githubusercontent.com/u/153407?v=3","gravatar_id":"","url":"https://api.github.com/users/sardaukar","html_url":"https://github.com/sardaukar","followers_url":"https://api.github.com/users/sardaukar/followers","following_url":"https://api.github.com/users/sardaukar/following{/other_user}","gists_url":"https://api.github.com/users/sardaukar/gists{/gist_id}","starred_url":"https://api.github.com/users/sardaukar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sardaukar/subscriptions","organizations_url":"https://api.github.com/users/sardaukar/orgs","repos_url":"https://api.github.com/users/sardaukar/repos","events_url":"https://api.github.com/users/sardaukar/events{/privacy}","received_events_url":"https://api.github.com/users/sardaukar/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2017-07-08T13:14:36Z","updated_at":"2017-07-11T21:30:07Z","closed_at":"2017-07-11T21:30:07Z","body":"Hello!\r\n\r\nHaving some difficulty using async actions from a popup. My initial idea was to have this on a \"module\":\r\n\r\n```js\r\nimport * as listActions from '../shared/actions/listActions'\r\n\r\nimport axios from 'axios'\r\n\r\nfunction requestConfig(token) {\r\n  return {\r\n    headers: {\r\n      'Accept': 'application/vnd.projectname.v1+json',\r\n      'Authorization': `Bearer ${token}`,\r\n    }\r\n  }\r\n}\r\n\r\nexport function fetchLists(dispatch, token) {\r\n  dispatch( (dispatch) => {\r\n    dispatch(listActions.refreshListsStart())\r\n    axios.get('/api/lists', requestConfig(token))\r\n      .then( (data) => {\r\n        dispatch(listActions.refreshListsFulfilled(data))\r\n      })\r\n      .catch( (err) => {\r\n        dispatch(listActions.refreshListsErrored(err))\r\n      })\r\n  })\r\n}\r\n```\r\n\r\nAnd then on the popup component:\r\n\r\n```js\r\nimport React from 'react'\r\nimport {connect} from 'react-redux'\r\n\r\nimport { fetchLists } from '../../modules/ajax'\r\n\r\n@connect((store) => {\r\n  return {\r\n    token: store.token,\r\n    lists: store.lists,\r\n  }\r\n})\r\nexport default class App extends React.Component {\r\n  componentWillMount() {\r\n    const { lists, dispatch, token } = this.props\r\n\r\n    if (lists.records.size === undefined) {\r\n      fetchLists(dispatch, token)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div style={{width: 200}}>\r\n        <div>\r\n          {JSON.stringify(this.props)}\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\nwith the background reducer being: \r\n\r\n```js\r\nimport {\r\n  LISTS_REFRESH_START,\r\n  LISTS_REFRESH_FULFILLED,\r\n  LISTS_REFRESH_ERRORED,\r\n} from '../../../shared/constants'\r\n\r\nimport * as utils from '../../../shared/utils'\r\n\r\nexport default function listsReducer(state=null, action) {\r\n  switch(action.type) {\r\n    case LISTS_REFRESH_START:\r\n      break\r\n\r\n    case LISTS_REFRESH_FULFILLED:\r\n      const records = action.payload.data.map( (item) => {\r\n        return {\r\n          icon: item.icon,\r\n          name: item.name,\r\n          id: item.id,\r\n        }\r\n      })\r\n      state =  {...state, records: records, activeId: records[0].id}\r\n      break\r\n  }\r\n\r\n  return state\r\n}\r\n```\r\n\r\nBut my understanding is that it's not possible to serialize actions with function returns across the message passing bridge. So, the alternative is to emit an action on the frontend and get an alias to translate it on the background to other action(s), but the aliases file has no access to the store or even the original action's payload, so it can't really dispatch additional actions (right?). \r\n\r\nNot sure how to fix this other than sticking the `axios` logic on the background reducer, which I don't think is the correct way of doing it. \r\n\r\nI'm a Redux newbie, so sorry if this doesn't make sense or if the solution is obvious!"},"comment":{"url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/comments/314578069","html_url":"https://github.com/tshaddix/react-chrome-redux/issues/87#issuecomment-314578069","issue_url":"https://api.github.com/repos/tshaddix/react-chrome-redux/issues/87","id":314578069,"user":{"login":"sardaukar","id":153407,"avatar_url":"https://avatars1.githubusercontent.com/u/153407?v=3","gravatar_id":"","url":"https://api.github.com/users/sardaukar","html_url":"https://github.com/sardaukar","followers_url":"https://api.github.com/users/sardaukar/followers","following_url":"https://api.github.com/users/sardaukar/following{/other_user}","gists_url":"https://api.github.com/users/sardaukar/gists{/gist_id}","starred_url":"https://api.github.com/users/sardaukar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sardaukar/subscriptions","organizations_url":"https://api.github.com/users/sardaukar/orgs","repos_url":"https://api.github.com/users/sardaukar/repos","events_url":"https://api.github.com/users/sardaukar/events{/privacy}","received_events_url":"https://api.github.com/users/sardaukar/received_events","type":"User","site_admin":false},"created_at":"2017-07-11T21:30:07Z","updated_at":"2017-07-11T21:30:07Z","body":"@vhmth it totally worked, thanks! As a newbie, how could I have known that the return from an alias could have been `(dispatch, getState)` ?"}}
{"actor":{"display_login":"sardaukar"}}