このRedux接続コードをどのようにリファクタリングするのですか？

Question

ステートレスコンポーネント（純関数）でRedux connectとasyncConnectを使いたいので、これらのクラスデコレータを正規関数呼び出しにリファクタリングする必要があります。

ただし、どこでもconnectを使用したasyncConnectの例は見つかりません。

は、ここで私が持っているものだ：

@asyncConnect([{ 
    deferred: true, 
    promise: ({ params, store: { dispatch, getState } }) => { 
    if (!isLoaded(getState())) { 
     return dispatch(loadUser(params.userID)) 
    } 
    }, 
}]) 
@connect(
    state => ({ // eslint-disable-line 
    user: state.publicData.user.data, 
    error: state.publicData.user.error, 
    loading: state.publicData.user.loading, 
    }), 
    { initializeWithKey }) 
export default class UserProfile extends Component { 
    ...stuff 
} 

は、ここで私は必要なものです：

asyncConnect(
    someStuff, 
    connect(moreStuff) 
)(props => <div />) 

私は実際にそれを書くためにどのようには考えています。

Answer 1

ダンがreduxで提供するcompose関数を使用できます。

import { compose } from 'redux'; 
import { connect } from 'react-redux'; 

... 

export default compose(
    asyncConnect(...), 
    connect(...) 
)(props => <div />); 

composeが右から左に適用されます。興味の問題として

Official documentation on compose.

---

これは、基本的にあなたが授業で使用しているデコレータ構文を使用するための別のアプローチです。あなたはクラスで同じアプローチを使うことができます。

---

そして少しアドバイス/ヒント。

リアクションは機能概念に大きく傾いています。それは私に大いに役立ちました。 I 非常に次の無料のオンラインブックをお勧めします。あなたはモナドの世界にいたる必要はありません、少なくとも最初の6つの章は、あなたが将来大きな堅実さを発揮すると言います。

https://github.com/MostlyAdequate/mostly-adequate-guide