Question

我有一个注册表单，它将数据异步发布到API，然后根据响应执行一些操作。调用函数后，我将调度“signup_in_progress”操作，其有效负载为“true”，并根据该状态更新我的状态，然后在解析承诺时使用“false”的有效负载调度此操作。 / p>

我可以通过在reducer中放入console.log（）语句来看到调度按预期发生。

当signup_in_progress状态为“true”时，我想要发生一个微调器而不是注册表单。但那并没有发生。知道我错过了什么吗？

我的行动：

export function signUpUser(props) {
    return function(dispatch) {
        dispatch({ type: SIGNUP_IN_PROGRESS, payload: true });
        axios
            .post(`${ROOT_URL}/signup`, props)
            .then(() => {
                dispatch({ type: SIGNUP_IN_PROGRESS, payload: false });
                dispatch({ type: SIGNUP_SUCCESS });
                browserHistory.push(`/signup/verify-email?email=${props.email}`);
            })
            .catch(response => {
                dispatch({ type: SIGNUP_IN_PROGRESS, payload: false });
                dispatch(authError(SIGNUP_FAILURE, response.response.data.error));
            });
    };
}

我的减速机的相关部分：

import {
    ...
    SIGNUP_IN_PROGRESS,
    SIGNUP_SUCCESS,
    SIGNUP_FAILURE...
} from '../actions/types';

export default function(state = {}, action) {
    switch (action.type) {
        ...
        case SIGNUP_IN_PROGRESS:
            return { ...state, signing_up: action.payload };
        ...

我的连结组件：

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../../actions';
import SignupFirstPage from './signupComponents/signupFirstPage';
import SignupSecondPage from './signupComponents/signupSecondPage';
import SignupThirdPage from './signupComponents/SignupThirdPage';
import Spinner from 'react-spinkit';

class SignUp extends Component {
    constructor(props) {
        super(props);
        this.nextPage = this.nextPage.bind(this);
        this.previousPage = this.previousPage.bind(this);
        this.state = {
            page: 1
        };
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }
    nextPage() {
        this.setState({ page: this.state.page + 1 });
    }

    previousPage() {
        this.setState({ page: this.state.page - 1 });
    }

    handleFormSubmit(props) {
        this.props.signUpUser(props);
    }

    render() {
        const { handleSubmit } = this.props;
        const { page } = this.state;
        if (this.props.signingUp) {
            return (
                <div className="dashboard loading">
                    <Spinner name="chasing-dots" />
                </div>
            );
        }
        return (
            <div>
                {page === 1 && <SignupFirstPage onSubmit={this.nextPage} />}
                {page === 2 && (
                    <SignupSecondPage
                        previousPage={this.previousPage}
                        onSubmit={this.nextPage}
                    />
                )}
                {page === 3 && (
                    <SignupThirdPage
                        previousPage={this.previousPage}
                        onSubmit={values => this.props.signUpUser(values)}
                    />
                )}
                <div>
                    {this.props.errorMessage &&
                        this.props.errorMessage.signup && (
                            <div className="error-container">
                                Oops! {this.props.errorMessage.signup}
                            </div>
                        )}
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        singingUp: state.auth.signing_up,
        errorMessage: state.auth.error
    };
}

SignUp = reduxForm({ form: 'wizard' })(SignUp);
export default connect(mapStateToProps, actions)(SignUp);

Answer 1

你的代码中只有一个拼写错误：

function mapStateToProps(state) {
    return {
        singingUp: state.auth.signing_up, // TYPO!!
        errorMessage: state.auth.error
    };
}

应改为

function mapStateToProps(state) {
    return {
        signingUp: state.auth.signing_up,
        errorMessage: state.auth.error
    };
}

Answer 2

我建议使用redux-pack，它允许您在reducer中处理请求的三个阶段：start，success和error。然后，您可以使用start处理程序将boolean设置为true，并在成功时将其设置为false。

在Redux中调度正在进行的操作

2 个答案: