从后代组件观察 Redux store

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

您最后一个问题的答案是肯定的，将商店（或其部分）向下传递到组件树是一种很好的做法。理想情况下，您只有很少的顶级 "smart" 组件知道商店并使用 connect，而所有其他组件将仅通过 props 接收商店的部分内容。 Here's an explanation of the "smart" versus "dumb" components.

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

Answer 2

从别处询问看来，虽然您可以通过道具通过树向下传递商店，但更好的方法是使用 this.context.store，如 pointed out by the creator of Redux - it uses React Context，因此您需要指定 contextTypes 在你的子组件中。

也许是个人喜好，但我更愿意这样做而不是通过树传递它。

从后代组件观察 Redux store

Observing the Redux store from descendent components

reactjs

redux