このredux recomposeブランチのユースケースを処理するには、より良い方法がありますか？

Question

私は、PartyDetailsというコンポーネントを持っています。これは、ajax呼び出しでデータを取得する必要があります。 ajaxリクエストの処理中にLoadingコンポーネントを表示します。

データがロードされているかどうかを判断するには、ストアにアクセスする必要があります。この私のようなルックス向上させる方法である：

propSetterがある

const enhance = compose(
    propSetter, 
    lifecycleEnhancer, 
    loading, 
) 

export default enhance(PartyDetails) 

：

const propSetter = connect((state) => { 
    const { party } = state 
    const { dataLoaded } = party 
    // for some reason state does not contain match, and I'm resorting to routing 
    const { routing: {location: { pathname }}} = state 
    const involvedPartyId = pathname.substring(pathname.lastIndexOf('/') + 1) 
    return { dataLoaded, involvedPartyId } 
}, {loadParty}) 

とlifecycleEnhancerは次のとおりです。

const lifecycleEnhancer = lifecycle({ 
    componentDidMount() { 
     this.props.loadParty(this.props.involvedPartyId) 
    } 
}) 

とloadingがある（この場合には、dataLoadedが来ることに気づきます前のconnectはpropSetterで行われました）：

データが取得された場合は、第2接続を使用してPartyDetailsの関連する小道具を取得しています。

私はちょうど数日前にrecomposeの学習を始めました。私の使用例に合った例は見つかりませんでした。上記は私がドキュメントを読んだ後に思いつき、他の記事に見られるいくつかの例です。

これを処理するにはどうすればよいですか？これはより良い方法で、おそらく2 connectコールを必要とせずに行うことができますか？あなたが接続する1つに小道具にマッピング状態とディスパッチのためのすべてのロジックを記述することができ

Answer 1

：

export default compose(
    connect(
    state => { 
     const { party } = state; 
     const { dataLoaded } = party; 
     const { routing: { location: { pathname } } } = state; 
     const involvedPartyId = pathname.substring(pathname.lastIndexOf("/") + 1); 

     // also put here your `mapStateToProps` code 

     return { dataLoaded, involvedPartyId }; 
    }, 
    { 
     loadParty 
     // the same here, append `mapDispatchToProps` logic 
    } 
), 
    lifecycle({ 
    componentDidMount() { 
     this.props.loadParty(this.props.involvedPartyId); 
    } 
    }), 
    branch(
    ({ dataLoaded }) => dataLoaded, 
    renderComponent(PartyDetails), 
    renderComponent(Loading) 
) 
    // as `branch` is returning HOC, we need to provide empty component to it in 
    // order to render whole component 
)(createSink());