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

Question

我有一个注册表单，它将数据异步发布到 API，然后根据响应执行一些操作。一旦函数被调用，我将调度一个 "signup_in_progress" 动作，有效载荷为 "true"，并基于它更新我的状态，然后在承诺已解决。

通过在 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));
            });
    };
}

我的reducer的相关部分：

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

我建议使用 redux-pack，它允许您在 reducer 中处理请求的三个阶段：开始、成功和错误。然后您可以使用启动处理程序将布尔值设置为 true，并在成功时将其设置为 false。

Answer 2

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

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

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

Dispatching an in-progress action in Redux

javascript

redux

react-redux

axios