withHandlers ...非同期で再構成しますか？

Question

約束のあるハンドラで使用することは可能ですか安全ですか？ 例：

withHandlers({ 
    onChange: props => event => { 
     props.callAPI(props.data) 
     .then(data => props.updateData(data)) 
    }, 
... 

ありがとう！

Answer 1

いくつかのテストの後、私はそれがかなりうまく動作していることを認識しました。 Recompose純粋な部品を使用して建築するための岩。

これは完全に有効であり、かなりうまく機能しています。

const enhWithHandlers = withHandlers({ 
    loginUserMutation: props => args => { 
    props.updateMutationState(loading: true, error: null }); 
    props.loginUser(args) 
     .then(() => 
     props.updateMutationState({loading: false, error: null })) 
     .catch(err => 
     props.updateMutationState({ loading: false, error: err })); 
    } 
}, 
... 
// then compose like 
export default compose(
    reduxConnect, 
    gqlConnectLogin, 
    gqlConnectRegister, 
    enhWithState, 
    enhWithHandlers 
)(UserLoginRegister); 

それは私がラップコンポーネントにApollo clientでgraphQl突然変異の結果を反映する能力の欠如を克服するのに役立ちます。これは、コンポーネント自体に副作用を必要とせずに完全に処理します。

Answer 2

しかし、我々はこのようにそれを使用する場合、いくつかの問題があります。props参照が実際に我々await props.loginUser(args)後に失われているので

compose(
    withState('loginStatus', 'setLoginStatus', {loading: false, error:null}), 
    withHandlers({ 
    loginUserMutation: props => async args => { 
     try { 
     props.setLoginStatus({loading: true, error: null}); 
     await props.loginUser(args); 
     } catch(error) { 
     props.setLoginStatus({...props.loginStatus, error}); 
     } finally { 
     props.setLoginStatus({...props.loginStatus, loading: false}); 
     } 
    } 
    }) 
) 

。それが間違ってしまった後に使用します。

上記のように使用しないでください。

---