从派生组件观察Redux存储

Question

我有以下组件：

import React from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { initwidget, subscribeToPriceStream } from './widgetActions';
@connect(createSelector(
    (state, props) => state.widgets[props.widgetId],
    widget => ({widget})
))
@propTypes({ widgetId: React.PropTypes.number.isRequired })
export default class Tradingwidget extends React.Component {
    componentWillMount() {
        this.props.dispatch(initwidget(this.props.widgetId));
        this.props.dispatch(subscribeToPriceStream(this.props.widget));
    }
    render() {
        const widget = this.props.widget || {};
        return (
            <div>
                {widget.title}
                // more goes here
            </div>
        );
    }
}

在componentWillMount中，第一个操作将使用一些默认属性初始化小部件状态。第二个操作将异步订阅服务。不过，当我调用第二个操作时，我需要从第一个操作返回的状态可用，这样我就可以将其传递到第二个动作。

假设我想在某些状态属性更改时触发subscribeToPriceStream操作，无论是在通过initwidget操作初始化小部件时还是在某些用户操作中，我想我都需要听取状态更改

最好的方法是什么？我已经看到商店上有一个subscribe方法，也看到了redux-rx，它有observableFromStore方法，但如果这是推荐的模式，那么从派生组件访问应用商店的最佳方式是什么？我应该通过道具穿过商店吗？

Answer 1

最后一个问题的答案是肯定的，最好将存储（或部分存储）传递到组件树下。理想情况下，只有极少数的顶级"智能"组件知道存储并使用connect，而所有其他组件只能通过props接收存储的一部分。以下是对"智能"one_answers"哑"组件的解释。

订阅存储更改的想法听起来很适合这种情况。我自己从来没有这样做过，所以我不能说需要注意的是什么。但是，是的，我同意对subscribeToPriceStream的调用不应该在组件中。在initwidget完成工作并将存储移动到新状态之后，应该将其视为一个单独的操作。

Answer 2

从其他地方询问，虽然您可以通过树中的道具传递存储，但更好的方法是使用this.context.store，正如Redux的创建者所指出的那样——它使用React Context，因此您需要在子组件中指定contextTypes。

也许是个人喜好，但我宁愿这样做，也不愿把它传给别人。