ソースコンポーネントの反応サガコール関数

Question

これを正しく質問する方法はかなりわかりません。 （ごめんなさい）基本的には、Saga関数にエラーが発生したときにエラー文字列でエラーを私のコンポーネントの関数に呼び出したいと思っています。だから私はSnackbarを5秒間起動して、それを再び隠すことができます。

しかし私はこの関数を私のSaga関数からどのように正確に呼び出すことができるのか分かりません。現時点では、this.state.error StateのエラーをStringとして返します。私はcomponentWillReceivePropsを使用しようとしましたが、これは文字列が同じ場合に2回目の試行では機能しません。

xiproblemを避けるために、私が持っているコードを投稿します。私は2つのソリューションを参照してください

import { Types } from './Actions'; 
import CognitoService from './CognitoService'; 

function* register(action) { 
    try { 
    const result = yield call(CognitoService.register, action); 
    yield put({ type: Types.registrationSuccess, user: result.user }); 
    } catch(error) { 
    yield put({ type: Types.registrationFail, error: error.message }); 
    } 
} 

function* authSaga() { 
    yield takeLatest(Types.register, register); 
} 

export default authSaga; 

Answer 1

この状況では：このReduxの-佐賀関数を呼び出す

class RegisterForm extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     email: '', 
     username: '', 
     password: '', 
     SnackbarOpen: false, 
    }; 
    } 
    onSubmit = (event) => { 
    event.preventDefault(); 
    this.props.register(this.state.email, this.state.username, this.state.password); 
    } 

    onError(error) { 
    this.setState({SnackbarOpen: true}) 
    setTimeout(() => { 
     this.setState({SnackbarOpen: false}); 
    }, 5000); 
    } 

    render(): with <form> 
} 

const mapStateToProps = (state) => ({ 
    error: state.auth.error, 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    register: (email, username, password) => { 
    dispatch(Actions.register(email, username, password)); 
    } 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(RegisterForm); 

：

は、私は、次のコンポーネントを得ました。最初の方が良いです、と思います。店舗あなたが国家レベルで「SnackbarOpen」変数を保存し、あなたの例では

値に基づいてレンダリング

。

this.setState({SnackbarOpen: true}) 

代わりに、「レジスタ」コンポーネントのストアを用意して、その変数をそこに保存することができます。そのような場合、サガはエラー時にストア内のその値を変更します。簡単な例は次のとおりです。

もちろん、その値をコンポーネントにバインドします。

追加するコールバック

私はこのようなアプローチを使用することをお勧めしませんが、それはまだ存在しています。あなたのアクションにコールバックを追加し、それをサガで呼び出すことができます。たとえば、次のように

コンポーネント：

this.props.register(this.state.email, this.state.username, this.state.password, this.onError.bind(this); 

サーガTypes.registrationFail：

function* register(action) { 
    try { 
    const result = yield call(CognitoService.register, action); 
    yield put({ type: Types.registrationSuccess, user: result.user }); 
    } catch(error) { 
    yield put({ type: Types.registrationFail, error: error.message }); 
    action.onError(); 
    } 
} 

Answer 2

は、アクションの種類に合わせてauth減速にスイッチケースを追加します。次に、登録されたエラーメッセージを取り出し、認証状態のauth.errorフィールドに割り当てます。例えば

authReducer(prevState, action){ 
    ... 
    switch(action.type){ 
     case Types.registrationFail: 
      return { 
       ...prevState, 
       error: action.error 
      }; 
    } 
    ... 
} 

お客様のコンポーネントは、connect(..)機能を介して店舗変更を受け取ります。次に、コンポーネントをcomponentWillReceivePropsライフサイクルメソッドで更新して、このメッセージの値を確認します。例えば

componentWillReceiveProps(nextProps, nextState){ 
    if(nextProps.error != null && ! nextState.SnackbarOpen){ 
     this.onError(); 
    } 
} 

あなたのスナックバーは同様に、このコンポーネント内であると単純にthis.props.error値からその表示テキストを引くことをここに仮定を作ります。さもなければ、これをもう少しもっときれいにする範囲があります。