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方法，但如果这是推荐的模式，那么＆＃ 39;是从后代组件访问应用商店的最佳方式吗？我是否应该通过道具一路经过商店？

Answer 1

最后一个问题的答案是肯定的，将商店（或部分商店）传递到组件树下是一种很好的做法。理想情况下，你很少有顶级＆＃34;智能＆＃34;知道商店并使用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 - 它使用React Context，所以您需要在子组件中指定contextTypes。

也许是个人喜好，但我更喜欢这样做，而不是把它传递到树上。

从后代组件观察Redux存储

2 个答案: