Reduxで進行中のアクションをディスパッチする

Question

私はサインフォームを持っています。これは、データをAPIに非同期でポストし、レスポンスに基づいていくつかのことを行います。私は "true"のペイロードで関数が呼び出されるとすぐに "signup_in_progress"アクションをディスパッチし、それに基づいて状態を更新し、約束が解決されたときにこのアクションを "false"のペイロードでディスパッチします。

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

マイ連結成分：あなたは、次の3つのフェーズを処理することができます私はredux-packを使用することをお勧めします

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

減速機における要求の開始、成功、およびエラー。 次に、開始ハンドラを使用してブール値をtrueに設定し、成功するとfalseに設定します。