如何在 createContainer (react-meteor-data) 中访问 Redux 状态？

Question

堆栈：Meteor 1.5、React、Redux、React Router 4

我正在尝试在 React 组件中显示一系列事件。应该根据一些 Redux 状态过滤事件。过滤应该发生在服务器端（以最小化流量） - 即通过订阅中的参数。

现在我不希望我的所有 Meteor 日期都处于 Redux 状态，而只希望一些常规应用程序设置（用户设置、过滤器、位置等）。

我的方法如下：

1. 用 Redux 状态连接哑组件并获取过滤器
2. 将连接的组件包装在 createContainer 中并传递 props（应包括过滤器）。

我的问题是：

道具不包括过滤器。有人知道为什么吗？代码如下。控制台日志只显示 Home 组件的 props（即未连接的组件）。

class Home extends Component {
    render () {
        return (
            <div>
                { /* display events here */ }
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        filter: state.filter
    }
}

let connectedHomeComponent = connect(mapStateToProps,)(Home)

export default connectedHomeContainer = createContainer(_ => {
    console.log(_);
    let eventsSub = Meteor.subscribe('getEventsByFilter');
    let loading = !eventsSub.ready();
    let events = null;
    loading ? (events = null) : (events = Events.find().fetch());
    let eventsExists = !loading && !!events;
    return {
        loading,
        events,
        eventsExists,
    }
}, connectedHomeComponent)

Answer 1

您以错误的顺序包装了 Home 组件。您的回调函数会传递您的 HomeContainercomponent 传递的道具。因此，如果您希望 redux 将 filter 属性注入到您的 HomeContainer 中，那么您必须将其转过来：

const HomeContainer = createContainer(_ => {
    console.log(_);
    const eventsSub = Meteor.subscribe('getEventsByFilter');
    const loading = !eventsSub.ready();
    let events = null;
    loading ? (events = null) : (events = Events.find().fetch());
    const eventsExists = !loading && !!events;
    return {
        loading,
        events,
        eventsExists,
    } }, Home)

export default connectedHomeContainer = connect(mapStateToProps)(HomeContainer)

附注：使用const 作为默认值，并且仅当您需要稍后更改变量时才将其更改为let。