Dispatching an in-progress action in Redux

Question

I have a signup form, which posts data asynchronously to an API and then does some stuff based on the response. I am dispatching a "signup_in_progress" action as soon as the function is called, with a payload of "true", and update my state based on that, then dispatching this action with a payload of "false" when the promise is resolved.

I can see that the dispatch happens as intended by putting a console.log() statement in the reducer.

What I would like to happen is for a spinner to appear instead of the signup form when the signup_in_progress piece of state is "true." But that's not happening. Any idea what I'm missing?

My action:

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

The relevant part of my 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 };
        ...

My connected component:

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

Can you include the reducer for SIGNUP_IN_PROGRESS and how the SIGNUP_IN_PROGRESS constant is defined / referenced in the reducer file? — Maluen
The code looks fine to me. Have you tried putting a console.log in the reducer to see which actions are being dispatched? — Maluen
Yes, just did, the dispatch is happening fine...never mind. Will edit the question-my conditional rendering is not working. — Boris K

Maluen Maluen · Accepted Answer · 2017-11-19T14:56:14

You just have a typo in your code:

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

should be changed to

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

Dispatching an in-progress action in Redux

2 Answers