Question

我有一个使用React和Redux的应用程序。

我的数据模型的几个部分是基本上是懒惰的，因此从redux状态读取数据时的一个常见模式是：查看是否已加载延迟数据，如果没有，则调度一个ReduxThunk-action来获取数据。

为了能够在mapStateToProps中触发这个过程我想实现一个自己的connect函数，它将一个resolve函数作为第三个参数传递给mapStateToProps。这个resolve函数应该可以访问dispatch，所以我可以触发延迟数据的ReduxThunk-action加载。我的mapStateToProps函数应如下所示：

const mapStateToProps = (state, ownProps, resolve) => {

    var myData;

    if (state.potentiallyLazy instanceof LazyLink) {
        resolve(state.potentiallyLazy);
    }
    else {
        myData = state.potentiallyLazy;
    }

    return {
        myData
    }
}

任何帮助如何实现，或提示不同的方法？我看了一下connectAdvanced（），但实际上并没有找到解决方案。

Answer 1

您可以扩展连接HOC以添加您的解析功能，如

export connectAdvanced = (...args) => {
    const resolve = () => {} // your resolve function here
    const [mapStateToProps] = args;
    const overridenMapStateToProps  = (state, ownProps) => {
        mapStateToProps(state, ownProps, resolve)
    }  
    const restParams = [overridenMapStateToProps, ...args.slice(1)];
    return (Component) => connect.apply(null, restParms)(Component);
}

并像

一样使用它

const mapStateToProps = (state, ownProps, resolve) => {

    var myData;

    if (state.potentiallyLazy instanceof LazyLink) {
        resolve(state.potentiallyLazy);
    }
    else {
        myData = state.potentiallyLazy;
    }

    return {
        myData
    }
}

export default connectAdvanced(mapStateToProps)(App);

然而，这种方法不再使mapStateToProps函数保持纯净，您应该考虑在生命周期方法中移动延迟加载操作，这是一种更好，更正确的方法

Answer 2

在几个级别上这是一个坏主意。

首先，您的mapState函数应该是纯粹的，同步的，没有副作用，与您的reducer相同。

其次，看起来您将类实例保留在商店状态which is discouraged because it will break time-travel debugging。

如果您需要触发加载行为，我建议在生命周期方法中将放在组件中。

React-Redux：向mapStateToProps添加自定义第三个参数 - 可能是connectAdvanced？

2 个答案: