{"action":"created","issue":{"url":"https://api.github.com/repos/react-boilerplate/react-boilerplate/issues/2708","repository_url":"https://api.github.com/repos/react-boilerplate/react-boilerplate","labels_url":"https://api.github.com/repos/react-boilerplate/react-boilerplate/issues/2708/labels{/name}","comments_url":"https://api.github.com/repos/react-boilerplate/react-boilerplate/issues/2708/comments","events_url":"https://api.github.com/repos/react-boilerplate/react-boilerplate/issues/2708/events","html_url":"https://github.com/react-boilerplate/react-boilerplate/issues/2708","id":477217291,"node_id":"MDU6SXNzdWU0NzcyMTcyOTE=","number":2708,"title":"useInjectReducer makes Redux action inside useEffect doesn't run","user":{"login":"piavgh","id":4060207,"node_id":"MDQ6VXNlcjQwNjAyMDc=","avatar_url":"https://avatars2.githubusercontent.com/u/4060207?v=4","gravatar_id":"","url":"https://api.github.com/users/piavgh","html_url":"https://github.com/piavgh","followers_url":"https://api.github.com/users/piavgh/followers","following_url":"https://api.github.com/users/piavgh/following{/other_user}","gists_url":"https://api.github.com/users/piavgh/gists{/gist_id}","starred_url":"https://api.github.com/users/piavgh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/piavgh/subscriptions","organizations_url":"https://api.github.com/users/piavgh/orgs","repos_url":"https://api.github.com/users/piavgh/repos","events_url":"https://api.github.com/users/piavgh/events{/privacy}","received_events_url":"https://api.github.com/users/piavgh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2019-08-06T07:33:27Z","updated_at":"2019-08-13T06:36:41Z","closed_at":null,"author_association":"NONE","body":"Before opening a new issue, please take a moment to review our [**community guidelines**](https://github.com/react-boilerplate/react-boilerplate/blob/master/CONTRIBUTING.md) to make the contribution process easy and effective for everyone involved.\r\n\r\n## Description\r\nThis is my sample component:\r\n\r\n```\r\nexport function CommentPage(props) {\r\n  useInjectReducer({ key, reducer })\r\n  useInjectSaga({ key, saga })\r\n\r\n  const { match } = props\r\n\r\n  useEffect(() => {\r\n    const params = {\r\n      userId: match.params.userId,\r\n      ruleId: match.params.ruleId,\r\n      formEditId: match.params.formEditId,\r\n      submissionId: match.params.submissionId,\r\n      step: match.params.step,\r\n      respondentEmail: match.params.respondentEmail,\r\n    }\r\n\r\n    props.saveParams(params)\r\n  }, [])\r\n\r\n  return (\r\n    ...\r\n  )\r\n}\r\n```\r\n\r\nBasically, `saveParams` is a Redux action that saves some parameters from the url into Redux store.\r\n\r\nIf I write the code this way (useInjectReducer above useEffect), when I reloaded the page and check Redux tab in Chrome DevTools, I can see that my action is fired, but immediately after that it was removed from the stack, and Redux store is back to the initial state\r\n\r\nI think it might be related to this issue somehow https://github.com/react-boilerplate/react-boilerplate/issues/2680\r\n\r\nI found out that if I switch the order of code a bit, it works as expected (I just moved the useInjectReducer below useEffect):\r\n\r\n```\r\nexport function CommentPage(props) {\r\n  const { match } = props\r\n\r\n  useEffect(() => {\r\n    const params = {\r\n      userId: match.params.userId,\r\n      ruleId: match.params.ruleId,\r\n      formEditId: match.params.formEditId,\r\n      submissionId: match.params.submissionId,\r\n      step: match.params.step,\r\n      respondentEmail: match.params.respondentEmail,\r\n    }\r\n\r\n    props.saveParams(params)\r\n  }, [])\r\n\r\n  useInjectReducer({ key, reducer })\r\n  useInjectSaga({ key, saga })\r\n\r\n  return (\r\n    ...\r\n  )\r\n}\r\n```\r\n\r\n## Steps to reproduce\r\nSteps to reproduce the behavior:\r\nPlease check this repository: https://github.com/piavgh/react-boilerplate-bug/\r\n\r\nFile: https://github.com/piavgh/react-boilerplate-bug/blob/master/app/containers/CommentPage/index.js#L37\r\n\r\nRun this repository and try to reload the URL: http://localhost:3000/comment/abc/qwe/xyz/sad/1/agt@gmail.com\r\n\r\n(Add link to a demo on https://jsfiddle.net or similar if possible)\r\n\r\n**Expected behavior**\r\nA clear and concise description of what you expected to happen.\r\nMy Redux action should be fired normally and Redux store should have my correct state\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\r\n\r\nCase 1: useInjectReducer above useEffect\r\nhttps://prnt.sc/oox63l\r\n\r\nCase 2: useInjectReducer is below useEffect\r\nhttps://prnt.sc/oox5cs\r\n\r\n## Versions\r\n\r\n- React-Boilerplate: 4.0.0\r\n- Node/NPM: v10.15.3\r\n- Browser: Chrome 75\r\n"},"comment":{"url":"https://api.github.com/repos/react-boilerplate/react-boilerplate/issues/comments/520708364","html_url":"https://github.com/react-boilerplate/react-boilerplate/issues/2708#issuecomment-520708364","issue_url":"https://api.github.com/repos/react-boilerplate/react-boilerplate/issues/2708","id":520708364,"node_id":"MDEyOklzc3VlQ29tbWVudDUyMDcwODM2NA==","user":{"login":"piavgh","id":4060207,"node_id":"MDQ6VXNlcjQwNjAyMDc=","avatar_url":"https://avatars2.githubusercontent.com/u/4060207?v=4","gravatar_id":"","url":"https://api.github.com/users/piavgh","html_url":"https://github.com/piavgh","followers_url":"https://api.github.com/users/piavgh/followers","following_url":"https://api.github.com/users/piavgh/following{/other_user}","gists_url":"https://api.github.com/users/piavgh/gists{/gist_id}","starred_url":"https://api.github.com/users/piavgh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/piavgh/subscriptions","organizations_url":"https://api.github.com/users/piavgh/orgs","repos_url":"https://api.github.com/users/piavgh/repos","events_url":"https://api.github.com/users/piavgh/events{/privacy}","received_events_url":"https://api.github.com/users/piavgh/received_events","type":"User","site_admin":false},"created_at":"2019-08-13T06:36:41Z","updated_at":"2019-08-13T06:36:41Z","author_association":"NONE","body":"@julienben I cloned a new react-boilerplate project, switched to `dev` branch (that contains your PR), and this bug is not fixed.\r\n\r\nThe behavior is exactly the same as before:\r\n\r\n> when I reloaded the page and check Redux tab in Chrome DevTools, I can see that my action is fired, but immediately after that it was removed from the stack, and Redux store is back to the initial state\r\n"}}
{"actor":{"display_login":"piavgh"}}