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

Question

我在 redux 表单中遇到了问题，我的问题出在代码中，一旦我通过了服务器验证。我想发送一个 Action ，但我做不到，
我正在使用 redux 表单的 submit validations example方法，在我的表单中，我有客户端和服务器端验证。
登录表单.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

解决方案一

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

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

为此，您需要使用 connect来自 react-redux允许您的组件访问 dispatch redux store 的功能。此外，您需要从 resolve 返回用户ajax 调用的分支:

.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 操作之后)

解决方案二

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