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

我有一个注册表单，它将数据异步发布到API，然后根据响应执行一些操作。我将在函数被调用后立即发送一个signup\u in\u progress操作，有效负载为true，并基于此更新我的状态，然后在承诺得到解决时发送有效负载为false的此操作

通过在reducer中放入console.log语句，我可以看到调度按预期进行

我希望出现的情况是，当状态的signup_in_progress部分为true时，出现一个微调器，而不是signup表单。但事实并非如此。知道我错过了什么吗

我的行动：

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);

我建议使用它，它允许您在reducer中处理请求的三个阶段：开始、成功和错误。

---

然后，您可以使用启动处理程序将布尔值设置为true，如果成功，则将其设置为false。

您的代码中有一个输入错误：

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
    };
}

---

你能包括注册进程中的缩减器以及如何在缩减器文件中定义/引用注册进程中的常量吗？是的，添加了它，请看一看。代码对我来说很好。您是否尝试过将console.log放入reducer中以查看正在调度哪些操作？是的，刚刚尝试过，调度正在正常进行…没关系。将编辑“我的条件渲染不工作”问题。