一旦服务器端验证以 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)

提交.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 store 的dispatch 函数。此外，您需要从 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 函数来调度多个动作。如果您想了解更多信息，请在下方发表评论，我会尝试扩展我的答案。