一旦服务器端验证以 redux 形式通过，就调度一个动作

Question

我遇到了 redux 形式的问题，我的问题出在代码中，一旦我通过了服务器验证。我想发出一个动作，但我做不到，我正在使用 redux 表单的 submit validations example 方法，在我的表单中我同时进行了客户端和服务器端验证。

LoginForm.js

import React from 'react'
import { Field, reduxForm } from 'redux-form'

import { required, email, maxLength25 } from '../utils/validations';
import validate from '../utils/signup_validate';
import { renderField } from '../utils/textFieldGroup';
import { login } from '../actions/submit';

const LoginForm =(props) => {
        const { handleSubmit, submitSucceeded, error } = props

        return (
          <form onSubmit={handleSubmit(login)}>
            <div className={typeof error!='undefined'?'show alert alert-danger': 'hidden'}>
             <strong>Error!</strong> {error}
            </div>
            <Field name="email" type="text"
              component={renderField} label="Email"
              validate={[ required, email, maxLength25 ]}
            />
            <Field name="password" type="password"
              component={renderField} label="Password"
              validate={[ required, maxLength25 ]}
            />
            <p>
              <button type="submit" disabled={submitSucceeded} className="btn btn-primary btn-lg">Submit</button>
            </p>
          </form>
        )
}

export default reduxForm({
  form: 'loginForm', // a unique identifier for this form
  validate
})(LoginForm)

submit.js

import axios from 'axios';
import isEmpty from 'lodash/isEmpty';
import { SubmissionError } from 'redux-form'
import {browserHistory} from 'react-router';
import setAuthorizationsToken from '../utils/setAuthorizationsToken';
import { SET_CURRENT_USER } from '../utils/types';
import jwt from 'jsonwebtoken';

export function login(data){
    console.log('submit', data);
    return axios.post('api/auth/login', data)
    .then((response) => {
        console.log('response', response.data.token);
        const token = response.data.token
        localStorage.setItem('jwtToken', token)
        setAuthorizationsToken(token)
        store.dispatch(setCurrentUser(jwt.decode(localStorage.jwtToken)))
        browserHistory.push('/');
    })
    .catch((error) => {
        console.log('error', error.response);
        throw new SubmissionError({ _error: error.response.data.errors});
    })
}

function setCurrentUser(user) {
    console.log('setCurrentUser');
    return {
        type: SET_CURRENT_USER,
        user: user
    }
}

我想调度 setCurrentUser 函数，以便我可以在 redux 存储中设置用户数据。

提前致谢。

Answer 1

解决方案 1

您可以传递另一个函数，而不是直接将您的登录函数传递给 handleSubmit：

login(data).then((user) => dispatch(setCurrentUser(user))

为此，您需要使用 react-redux 中的 connect 以允许您的组件访问 redux 存储的 dispatch 功能。此外，您需要 return 来自 ajax 调用的 resolve 分支的用户：

.then((response) => {
    console.log('response', response.data.token);
    const token = response.data.token
    localStorage.setItem('jwtToken', token)
    setAuthorizationsToken(token)
    return jwt.decode(localStorage.jwtToken));
})

此外，我的建议是将 browserHistory.push('/') 调用移动到组件（在调度 setCurrentUser 操作之后）

解决方案 2

您实际上需要将操作链接在一起，登录 -> 然后 -> setCurrentUser。为此，您应该使用 redux 中间件。如果您在我建议从 redux-thunk: https://github.com/gaearon/redux-thunk 开始之前没有使用过中间件。使用 redux-thunk，您可以在动作创建器中使用 dispatch 函数来分派多个动作。如果您想了解更多信息，请在下方发表评论，我会尝试扩展我的答案。

一旦服务器端验证以 redux 形式通过，就调度一个动作

dispatch a action once server side validation passed in redux form

redux

redux-thunk

redux-form

react-redux

react-router-redux

LoginForm.js

submit.js