{"action":"opened","issue":{"url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/845","repository_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit","labels_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/845/labels{/name}","comments_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/845/comments","events_url":"https://api.github.com/repos/davezuko/react-redux-starter-kit/issues/845/events","html_url":"https://github.com/davezuko/react-redux-starter-kit/issues/845","id":158538064,"number":845,"title":"troubleshooting action creators","user":{"login":"brandonmp","id":14139991,"avatar_url":"https://avatars.githubusercontent.com/u/14139991?v=3","gravatar_id":"","url":"https://api.github.com/users/brandonmp","html_url":"https://github.com/brandonmp","followers_url":"https://api.github.com/users/brandonmp/followers","following_url":"https://api.github.com/users/brandonmp/following{/other_user}","gists_url":"https://api.github.com/users/brandonmp/gists{/gist_id}","starred_url":"https://api.github.com/users/brandonmp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brandonmp/subscriptions","organizations_url":"https://api.github.com/users/brandonmp/orgs","repos_url":"https://api.github.com/users/brandonmp/repos","events_url":"https://api.github.com/users/brandonmp/events{/privacy}","received_events_url":"https://api.github.com/users/brandonmp/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-06-05T05:16:24Z","updated_at":"2016-06-05T05:16:24Z","closed_at":null,"body":"I'd normally throw a question like this on stackoverflow, but I suspect the problem is something I'm missing in the structure of redux elements across files in this project.\r\n\r\nI am creating a component that calls Firebase's Google login popup.  After writing the action creators & component, login worked fine. However, after trying to write the reducers, the action creators aren't getting past their respective `return` statements. \r\n\r\nI've tried reverting the changes, but I'm pretty new & not awesome w/ VCS. \r\n\r\nso: Is there a straightforward way to debug a situation like this? is there another file i should've made changes to?\r\n\r\na few details \r\n- the store object from the `duck` initializes w/ initial state\r\n- `console.log()` statements work if they're in an action creator, but before the return statement. if they're in a `thunk`, nada\r\n\r\n(and pls. feel free to point out ill-advised patterns or dumb stuff i'm doing. always looking to get better)\r\n\r\n\r\n// containers/LoginWidget.jsx (mistakenly combined container/presentation component, plan on splitting once it's working)\r\n\r\n```\r\n\r\nimport React from 'react';\r\nimport Paper from 'material-ui/Paper';\r\nimport RaisedButton from 'material-ui/RaisedButton';\r\nimport {attemptLogin, logUserOut} from 'containers/LoginWidget/modules/user-auth.js';\r\nimport {connect} from 'react-redux';\r\n\r\nclass LoginWidget extends React.Component {\r\n\r\n  constructor(props) {\r\n    super(props);\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <Paper style={styles.wrapper}>\r\n        <RaisedButton\r\n          label=\"Sign in with Google\"\r\n          labelStyle={styles.loginButton}\r\n          backgroundColor={'#D84B37'}\r\n          icon={<img height={15} src={require('./assets/google.png')}/>}\r\n          name=\"google\"\r\n          onTouchTap={() => this.props.dispatch(attemptLogin)}\r\n        />\r\n        <RaisedButton\r\n          label=\"Logout\"\r\n          labelStyle={styles.loginButton}\r\n          backgroundColor={'#D84B37'}\r\n          name=\"logout\"\r\n          onTouchTap={() => this.props.dispatch(logUserOut)}\r\n        />\r\n      </Paper>\r\n    )\r\n  }\r\n}\r\n\r\nexport default connect()(LoginWidget);\r\n```\r\n\r\n// containers/LoginWidget/modules/user-auth.js\r\n````\r\n// ------------------------------------\r\n// Constants\r\n// ------------------------------------\r\n\r\n//user authentication statuses\r\nexport const USER_NOT_AUTHENTICATED = 'USER_NOT_AUTHENTICATED'; //ie, just arrived to site & hasn't logged in yet\r\nexport const USER_AUTH_IN_PROGRESS = 'USER_AUTH_IN_PROGRESS';\r\nexport const USER_LOGGED_IN = 'USER_LOGGED_IN';\r\nexport const USER_AUTH_ERROR = 'USER_AUTH_ERROR';\r\nexport const USER_LOGGED_OUT = 'USER_LOGGED_OUT';\r\n\r\n\r\n// ------------------------------------\r\n// Actions\r\n// ------------------------------------\r\nexport const startAuthListener = function () {\r\n  //this listener will update state upon changes of auth status.\r\n  console.log(\"auth listener function started\");  //this prints\r\n  return dispatch => {\r\n    console.log(\"auth listener actn crtr started\");  //this doesn't print\r\n    firebase.auth().onAuthStateChanged(function (user) {\r\n      if (user) {\r\n        // User is signed in, dispatch action\r\n        dipatch({type: USER_LOGGED_IN, authData: user})\r\n\r\n      } else {\r\n        // User is signed out, dispatch action\r\n        dispatch({type: USER_LOGGED_OUT})\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nexport const attemptLogin = function () {\r\n  console.log(\"attemptLogin fired\")\r\n  return dispatch => {\r\n    console.log(\"login actn crtr started\");\r\n    //using globally avail firebase\r\n    let provider = new firebase.auth.GoogleAuthProvider();\r\n\r\n    //specify data we want from google oauth\r\n    provider.addScope('profile, email');\r\n\r\n    //create login popup\r\n    firebase.auth().signInWithPopup(provider).then(function (result) {\r\n\r\n        //the auth listener  in startAuthListener() will handle the rest\r\n\r\n      }\r\n    ).catch(function (error) {\r\n      //something's amiss!\r\n      dispatch({type: USER_AUTH_ERROR, error: error})\r\n    });\r\n  }\r\n}\r\n\r\n\r\nexport const logUserOut = function () {\r\n\r\n  return dispatch => {\r\n    firebase.auth().signOut().then(function () {\r\n      dispatch({type: USER_LOGGED_OUT})\r\n    });\r\n  }\r\n}\r\n\r\n\r\nexport const actions = {\r\n  startAuthListener,\r\n  attemptLogin,\r\n  logUserOut\r\n}\r\n\r\n\r\n// ------------------------------------\r\n// Action Handlers\r\n// ------------------------------------\r\n\r\nconst ACTION_HANDLERS = {\r\n  [USER_NOT_AUTHENTICATED]: (state, action) => Object.assign({}, state, {authStatus: USER_NOT_AUTHENTICATED}),\r\n  [USER_AUTH_IN_PROGRESS]: (state, action) => Object.assign({}, state, {authStatus: USER_AUTH_IN_PROGRESS}),\r\n  [USER_LOGGED_IN]: (state, action) => Object.assign({}, state, {authStatus: USER_LOGGED_IN, authData: action.authData}),\r\n  [USER_AUTH_ERROR]: (state, action) => Object.assign({}, state, {authStatus: USER_AUTH_ERROR, authError: action.error}),\r\n  [USER_LOGGED_OUT]: (state, action) => Object.assign({}, state, {authStatus: USER_LOGGED_OUT}),\r\n}\r\n\r\n\r\n// ------------------------------------\r\n// Reducer\r\n// ------------------------------------\r\nconst initialState = {authStatus: USER_NOT_AUTHENTICATED}\r\n\r\nexport default function authReducer(state = initialState, action) {\r\n  console.log(state)\r\n  const handler = ACTION_HANDLERS[action.type]\r\n\r\n  return handler ? handler(state, action) : state\r\n}\r\n````\r\n// store/reducers.js\r\n````\r\nimport { combineReducers } from 'redux'\r\nimport { routerReducer as router } from 'react-router-redux'\r\nimport authReducer  from 'containers/LoginWidget/modules/user-auth.js'\r\n\r\nexport const makeRootReducer = (asyncReducers) => {\r\n  return combineReducers({\r\n    // Add sync reducers here\r\n    router,\r\n    authReducer,\r\n    ...asyncReducers\r\n  })\r\n}\r\n\r\nexport const injectReducer = (store, { key, reducer }) => {\r\n  store.asyncReducers[key] = reducer\r\n  store.replaceReducer(makeRootReducer(store.asyncReducers))\r\n}\r\n\r\nexport default makeRootReducer\r\n````\r\n\r\n"}}
{"actor":{"display_login":"brandonmp"}}