首页 文章

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

提问于
浏览 次
2

我有一个redux形式的问题，我的问题是在代码中，一旦我通过我的服务器验证 . 我想发送一个动作，但我无法以我的形式进行客户端和服务器端验证 .

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存储中设置用户数据 .

提前致谢 .

redux react-redux redux-form redux-thunk react-router-redux

1 回答

  • 3

    Solution 1

    您可以传递以下功能，而不是直接将您的登录功能传递给 handleSubmit ：

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

    为此，您需要使用 connect 中的 connect 来允许组件访问redux存储的 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 动作之后）

    Solution 2

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

    回复于

相关问题