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

Question

我有一个注册表单，该表单将数据异步发布到API，然后根据响应执行一些操作。 我将在调用函数后立即分派“ signup_in_progress”操作，有效载荷为“ true”，并基于此更新我的状态，然后在解决诺言时，以有效载荷“ false”分派此操作。

通过在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 ，它允许您在化简器中处理请求的三个阶段：启动，成功和错误。 然后，您可以使用启动处理程序将布尔值设置为true，并在成功时将其设置为false。