2016-08-01 6 views
4

私はReactとReduxの新機能です。成功コールバック内でコール・イールドput()

私はreact-reduxを使用して、成功と失敗のコールバックを含むオブジェクトを受け取るAWS Cognitoサービスを呼び出しています。 AWSのCognitoから私のJWTを取得します。しかし、それはジェネレータ関数(function*)ではないので、どうすればこのコールバックの中にyield put()を入れることができますか?ここで

は、いくつかのコードです:

export function* getAWSToken(){ 
    // username, password and userPool come from react state 
    // not showing code for brevity. 

    const userData = { 
     Username: username, 
     Pool: userPool, 
    }; 
    const authenticationData = { 
    Username : username, 
    Password : password, 
    }; 

    const cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); 
    const authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData); 

    // This here is the callback 
    cognitoUser.authenticateUser(authenticationDetails, { 
    onSuccess(result){ 
     yield put(cognitoTokenObtained(result.getIdToken().getJwtToken()) 
    }, 
    onFailure(err){} 
    }); 
} 
+0

なぜ発電機機能を使用するのですか? 'getAWSToken'を呼び出すたびに、あなたは新しいトークンを与えます、ジェネレータは物事を改善しますか? –

+0

前に書いたように、私はReactとReduxの新機能ですので、例を示します。 redux-sagaが使用されているところでは、ジェネレータ関数が使用されているようです。そうでない場合は、お知らせください。 –

+0

ええと、それは私にはあまりにも複雑なようです。通常の関数を使って、getAWSToken(yourCallback)のコールバックを渡し、 'onSuccess'の中でその関数を' callback(result) 'のように呼び出すことができます。しかし、ジェネレータ関数を使うための「還元サガ」の理由がある場合、「還元サガ」を壊すようなものを示唆したくはありません。 –

答えて

4

あなたは(素晴らしいです)Reduxの-サガを使用している場合は、あなたがすることの命令セットにcognitoUser.authenticateUserようasycコールバックを変換するためにcall effectを使用することができます途中で実行されます。

ミドルウェアがコールを解決すると、ジェネレータを次のyield文にステップ実行します。戻り値を変数に代入し、putエフェクトを使用して状態に配置できます。

export function* getAWSToken(){ 
    // username, password and userPool come from react state 
    // not showing code for brevity. 

    const userData = { 
     Username: username, 
     Pool: userPool, 
    }; 
    const authenticationData = { 
    Username : username, 
    Password : password, 
    }; 

    const cognitoUser = new AWSCognito.CognitoIdentityServiceProvider.CognitoUser(userData); 
    const authenticationDetails = new AWSCognito.CognitoIdentityServiceProvider.AuthenticationDetails(authenticationData); 

    // Note: since you're invoking an object method 
    // you'll want to pass the object's context (this) with the call via an array 

    const token = yield apply(cognitoUser, cognitoUser.authenticateUser, [authenticationDetails, { onSuccess(response){return response}, onFailure(){} }]); 

    yield put(cognitoTokenObtained(token.getIdToken().getJwtToken()); 
} 

また、this incredible tutorialもあります。

編集:簡潔にするためにいくつかのコードを残しましたが、APIの外部IOに依存しているので、試しにキャッチしてジェネレータ内部のコードをラップすることを強くおすすめします。

+0

あなたの例とチュートリアルのリンクをありがとう、私は事前に知っていた 'call/put'についてもっと学びました。しかし、私はあなたが提供した例にまだ若干の問題があります。 'cognitoUser.authenticateUser'の呼び出しを使用すると、AWSのCognito JSライブラリは' TypeError:プロパティ 'getUserPoolId' undefined'を読み込めません。これは、 'call()'メソッドに正しく渡されていないと思うようになります。方法。 –

+0

それを見て、私はコンテキストを渡す必要があった、すなわち、cognitoUser。だから、私の呼び出しはこのように見えます。 'const token = yield call([cognitoUser、cognitoUser.authenticateUser]、authenticationDetails);' –

+0

ああ!申し訳ありませんが、私はそれを逃した!今後の視聴者のために答えを更新します。ありがとうパトリック! –

関連する問題