重新組合withHandlers ...異步？

Question

是否可以/安全地使用帶有承諾的處理程序？ 例：

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

謝謝！

Answer 1

經過一些測試，我意識到它運作良好。 重新構圖岩石與純組分建設。

這是完全有效的，並且運作良好。

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客戶端的graphQl變異結果反映到包裝組件的能力不足的問題。 這樣可以完美地處理它，而不需要組件本身的副作用。

Answer 2

但是當我們像這樣使用它時會出現一些問題：

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

因為在我們await props.loginUser(args)之后， props引用確實丟失了。 然后我們在錯誤之后使用它。

我們應該注意不要像上面那樣使用它。

---