Redux 양식이 성공적으로 제출 완료되었습니다.

성공을 처리하고 다음 페이지로 이동할 수있는 가장 좋은 방법은 어디인지 이해하는 데 어려움이 있습니다.Redux 양식이 성공적으로 제출 완료되었습니다.

나는 로그인 폼에서 일하고 있어요 :

class LogInComponent extends Component { 

    render() { 
     const {dispatch} = this.props; 
     const {loginError, handleSubmit, pristine, reset, submitting} = this.props; 

     return (
      <form onSubmit={handleSubmit((values) => dispatch(login(values))) }> 
       <Field name="username" type="text" component={renderField} label="Username" /> 
       <Field name="password" type="password" component={renderField} label="Password" /> 
       {loginError && <strong>{loginError}</strong>} 
       <div> 
        <button type="submit" disabled={submitting}>Log In</button> 
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
       </div> 
      </form> 
     ) 
    }

그리고 액션 :

export function login(values) { 
    const email = values.username; 
    const password = values.password; 
    return dispatch => { 
     dispatch(loginSubmit()); 
     firebaseAuth.signInWithEmailAndPassword(email, password).then(function(user) { 
      dispatch(signInSuccess(user)); 
     }).catch(function(error) { 
      dispatch(signInError(error)); 
     }); 
    }; 
} 

export function loginSubmit() { 
    return { 
     type: SIGN_IN_SUBMIT 
    }; 
} 

export function signInError(error) { 
    return { 
     type: SIGN_IN_ERROR, 
     payload: error.message 
    }; 
} 

export function signInSuccess(user) { 
    return { 
     type: SIGN_IN_SUCCESS, 
     payload: user 
    }; 
}

을 응답이 성공하면, 나는 다음 페이지로 이동하고 싶습니다. 그러나 네비게이션은 어디에 있어야합니까? 감속기 또는 동작에서가 아니라 구성 요소에서만 발생하지만 동작은 설계 상 응답을 반환하지 않습니다. 내가 놓친 것이 있습니까?

출처

2016-12-04 MCMatan

를 지금까지 내가'browserHistory' 사용하고 내부'반응-router'에서 내 프로덕션 모드에서 문제없이 작동합니다. 그래서'dispatch (signInSuccess (user)); 바로 아래에'broswerHistory.push (yourLink)'를 놓으면 괜찮을 것입니다. –

로그인 코드와 탐색 로직을 연결하는 작성 기능을 만들고 양식 제출시 작동하는 dispatch을 작성하십시오.

import { browserHistory } from './react-router'; 

// no export needed, this is a @private function 
function login(values) { 
    const email = values.username; 
    const password = values.password; 
    return dispatch => { 
     dispatch(loginSubmit()); 
     return firebaseAuth.signInWithEmailAndPassword(email, password) 
     .then((user) => dispatch(signInSuccess(user))) 
     .catch((error) => dispatch(signInError(error))); 
    }; 
} 

export function loginAndRedirect(loginParams) { 
    return dispatch => dispatch(login(loginParams)) 
    .then(() => browserHistory.push('/success/path')) 
    .catch(() => browserHistory.push('/failure/path')); 
} 

// ... other actions

지금 우리의 구성 요소에 우리는이 작업을 수행합니다 :

는 행동을 다음과 같이 파일을 수정

<form onSubmit={handleSubmit((values) => dispatch(loginAndRedirect(values))) }>

출처

2016-12-05 03:58:54

Redux 양식이 성공적으로 제출 완료되었습니다.

답변

관련 문제