{"action":"created","issue":{"url":"https://api.github.com/repos/rackt/redux/issues/297","labels_url":"https://api.github.com/repos/rackt/redux/issues/297/labels{/name}","comments_url":"https://api.github.com/repos/rackt/redux/issues/297/comments","events_url":"https://api.github.com/repos/rackt/redux/issues/297/events","html_url":"https://github.com/rackt/redux/issues/297","id":96549765,"number":297,"title":"Best practice on handling data flow for login / signup pages with redirect","user":{"login":"emmenko","id":1110551,"avatar_url":"https://avatars.githubusercontent.com/u/1110551?v=3","gravatar_id":"","url":"https://api.github.com/users/emmenko","html_url":"https://github.com/emmenko","followers_url":"https://api.github.com/users/emmenko/followers","following_url":"https://api.github.com/users/emmenko/following{/other_user}","gists_url":"https://api.github.com/users/emmenko/gists{/gist_id}","starred_url":"https://api.github.com/users/emmenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emmenko/subscriptions","organizations_url":"https://api.github.com/users/emmenko/orgs","repos_url":"https://api.github.com/users/emmenko/repos","events_url":"https://api.github.com/users/emmenko/events{/privacy}","received_events_url":"https://api.github.com/users/emmenko/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/rackt/redux/labels/discussion","name":"discussion","color":"fbca04"},{"url":"https://api.github.com/repos/rackt/redux/labels/docs","name":"docs","color":"5319e7"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":36,"created_at":"2015-07-22T11:51:07Z","updated_at":"2015-12-13T19:09:59Z","closed_at":"2015-09-04T19:54:09Z","body":"EDIT: what I'm trying to understand here is how to handle data flow when you have a page with a form. After you submit the form you either **redirect to another page** or **render an error message**.\r\n\r\nThe challenge is where this information should be _temporary stored_ in the data flow. Because after you redirect or render the message, the state (or information you stored) is not relevant anymore and should be reset or cleaned.\r\n\r\n---\r\n\r\nIn a backend web application you usually have pages like login, signup, reset password, etc.\r\n\r\nWhen the user navigates to the app and is not logged in, he gets redirected to login page. This can be easily done with RR `onEnter` hook.\r\n\r\nThen the user will fill up the form and submit it. At this point usually if the request was successful you want to redirect to application root or to some other \"secured\" page. If it failed, you want to stay on the page and show an error message. \r\n\r\n(This applies not only for login page, but other pages as well as mention before. I will just focus on the login for now) \r\n\r\nSo far you have this flow (which is common use case):\r\n- user go to `/`\r\n- redirect to `/login`\r\n- fill up form and submit\r\n- if ok redirect to `/` (or some other page)\r\n- if failed stay on login form and show error message\r\n\r\nIf we implement this flow with redux, I guess I have following setup:\r\n\r\n```js\r\n// actions\r\nfunction login (form) {\r\n  return dispatch => doLogin(form)\r\n    .then(() => dispatch({ type: 'LOGGED_IN' }))\r\n    .catch(() => dispatch({ type: 'LOGIN_FAILED' }))\r\n}\r\n\r\n// reducer\r\nconst initialState = {\r\n  // some fields...,\r\n  loggedIn: false,\r\n  shouldRedirect: false,\r\n  errorMessage: null\r\n}\r\nfunction application (state = initialState, action) {\r\n  switch action.type {\r\n    case 'LOGGED_IN':\r\n      return Object.assign({}, state, { loggedIn: true, shouldRedirect: true })\r\n    case 'LOGIN_FAILED':\r\n      return Object.assign({}, state, { loggedIn: false, shouldRedirect: false, errorMessage: action.error.message })\r\n  }\r\n  return state\r\n}\r\n\r\n// component\r\n@connect(state => { application: state.application })\r\nclass Login extends React.Component {\r\n  componentWillUpdate () {\r\n    const { router } = this.context\r\n    const { application } = this.props\r\n    if (application.shouldRedirect)\r\n      router.transition(...)  \r\n  }\r\n\r\n  onSubmit () {\r\n    const actions = bindActionCreators(applicationActions, dispatch)\r\n    actions.login({...})\r\n  }\r\n\r\n  render () {\r\n    const { errorMessage } = this.props\r\n    return (\r\n      <div>\r\n        {errorMessage ? <p>{errorMessage}</p> : null}\r\n        <Form {...props} onSubmit={onSubmit}>\r\n          {...}\r\n        </Form>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\nGiven this flow is correct - hopefully :) - you can see that I have 2 flags in the application state: `shouldRedirect` and `errorMessage`.\r\nThose flags are only used when submitting the form. \r\n\r\nFirst question: is that ok to have those flags in the application state?\r\n\r\nAnother thing to consider is that I have to \"reset\" those flags when I redirect because if I want to go to another page (e.g. signup, ...) I should have a clean state (`{ shouldRedirect: false, errorMessage: null }`).\r\n\r\nSo I might want to dispatch another action like\r\n\r\n```js\r\n// actions\r\nfunction resetSubmitState () {\r\n  return { type: 'RESET_SUBMIT' }\r\n}\r\n\r\n// component\r\ncomponentWillUpdate () {\r\n  const { store, router } = this.context\r\n  const { application } = this.props\r\n  if (application.shouldRedirect) {\r\n    store.dispatch(applicationActions.resetSubmitState())\r\n    router.transition(...)  \r\n  }\r\n}\r\n```\r\n\r\nHave anybody had this problem? Am I missing something or is that the \"correct\" way to do it?\r\n\r\nAre there any other alternatives?\r\n\r\nAny feedback is very welcomed! :)\r\n"},"comment":{"url":"https://api.github.com/repos/rackt/redux/issues/comments/164288464","html_url":"https://github.com/rackt/redux/issues/297#issuecomment-164288464","issue_url":"https://api.github.com/repos/rackt/redux/issues/297","id":164288464,"user":{"login":"SkateFreak","id":2161649,"avatar_url":"https://avatars.githubusercontent.com/u/2161649?v=3","gravatar_id":"","url":"https://api.github.com/users/SkateFreak","html_url":"https://github.com/SkateFreak","followers_url":"https://api.github.com/users/SkateFreak/followers","following_url":"https://api.github.com/users/SkateFreak/following{/other_user}","gists_url":"https://api.github.com/users/SkateFreak/gists{/gist_id}","starred_url":"https://api.github.com/users/SkateFreak/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/SkateFreak/subscriptions","organizations_url":"https://api.github.com/users/SkateFreak/orgs","repos_url":"https://api.github.com/users/SkateFreak/repos","events_url":"https://api.github.com/users/SkateFreak/events{/privacy}","received_events_url":"https://api.github.com/users/SkateFreak/received_events","type":"User","site_admin":false},"created_at":"2015-12-13T19:09:59Z","updated_at":"2015-12-13T19:09:59Z","body":"i agree.\r\nbut i see SignUp as a form, with a state - which should be sufficient no matter how complex imo...\r\n\r\non the other hand, what do i know about sign ups,\r\ncould be an app by itself if you are brave enough 😎\r\n"}}