Question

我遇到了还原形式的问题，我的问题是在代码中，一旦我通过我的服务器验证。我想发一个动作，但我无法做到，我正在使用redux form submit validations example方法，在我的形式中我同时拥有客户端＆amp;服务器端验证。

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 

您可以传递另一个执行以下功能的函数，而不是直接将您的登录功能传递给extension Double { func decimal(places: Int) -> Double { let resultString = NSString(format: "%.\(places)f" as NSString, self) as String return Double(resultString)! } }：

handleSubmit

为此，您需要使用login(data).then((user) => dispatch(setCurrentUser(user))中的connect来允许您的组件访问redux商店的react-redux功能。此外，您需要从ajax调用的dispatch分支返回用户：

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('/')操作后）

解决方案2

您实际上需要将操作链接在一起，登录 - ＆gt;然后 - ＆gt; setCurrentUser。为此，您应该使用redux中间件。如果您在建议使用setCurrentUser：https://github.com/gaearon/redux-thunk之前未使用过中间件。使用redux-thunk，您可以使用动作创建者中的redux-thunk功能来分派多个动作。如果您想了解更多相关信息，请在下面发表评论，我会尝试扩展我的答案。

一旦以redux形式传递服务器端验证，就会调度一个动作

LoginForm.js

submit.js

1 个答案: