有没有更好的方法来处理这个redux重构分支用例？

Question

我有一个名为PartyDetails的组件，它需要通过ajax调用获取数据。我想在ajax请求正在进行时显示Loading组件。

问题是，为了确定数据是否加载，我需要访问商店。这就是我的增强看起来像：

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

export default enhance(PartyDetails) 

其中propSetter是：

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来自已在propSetter中完成的前connect）：

const loading = branch(
    ({dataLoaded}) => dataLoaded, 
    renderComponent(connect(mapStateToProps, mapDispatchToProps)(PartyDetails)), 
    renderComponent(Loading) 
) 

所以基本上，如果数据已经被提取，我使用第二个连接来获取PartyDetails的相关道具。

我刚刚开始学习recompose几天前，我找不到一个适合我的用例的例子。以上是我在阅读完文档后提出的，以及其他文章中的一些例子。

我正在做一个很好的处理方法？这是否可以以更好的方式完成，也许不需要拨打电话？

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