在Redux表单中提交表单后发送和重定向

时间:2017-07-26 10:54:16

标签: reactjs redux react-router redux-form

建议的方式是什么:

  1. 使用组件props中包含的数据发送事件
  2. 使用react-router
  3. 重定向到其他页面

    使用redux-form成功提交异步表单?

2 个答案:

答案 0 :(得分:0)

我设置了一个回调函数,当调度交付函数时调用该函数:

<强>组件

onSubmit() {
    const { userEmail, userPassword } = this.props;
      this.props.loginUser({ userEmail, userPassword }, () => {
      this.props.history.push('/dashboard');
    });
}

<强>动作

export const loginUser = ({ userEmail, userPassword }, callback) => {
  return(dispatch) => {
    dispatch({ type: LOGIN_USER });
    auth.signInWithEmailAndPassword(userEmail, userPassword)
    .then(
      user => { 
        loginUserSuccess(dispatch, user);
      },
      error => {       
        loginUserFail(dispatch, error.message);
      }
    )
      redirectFunction(callback);
  }
}

// Helper functions
const loginUserSuccess = (dispatch, user) => {  
    dispatch({
        type: LOGIN_USER_SUCCESS,
        payload: user
    });
};

const loginUserFail = (dispatch, error) => {
    dispatch({ 
        type: LOGIN_USER_FAIL,
        error: error 
    });
};

<强>减速器

 case LOGIN_USER:
        return { ...state, loading: true, error: '' };
    case LOGIN_USER_SUCCESS:
        console.log(action.payload);
        return { ...state, ...INITIAL_STATE, user: action.payload, loggedIn: true };
    case LOGIN_USER_FAIL:
        return { ...state, error: action.error };

答案 1 :(得分:0)

通过在redux-form回调onSubmitSuccess / onSubmitFailure内部调度和重定向来管理解决方法。