目标是控制其他应用程序,我已经从 redux 商店获取数据。但我想看看哪个组件使用 Redux 商店的哪个字段。让我举例说明:
目标应用
const App = props => (
<React.Fragment>
<AppComponents/>
<MyImportedComponent dispatch={props.dispatch} state={props.state} />
</React.Fragment>
);
const mapStateToProps = state => ({ state });
export default connect(mapStateToProps)(App);
在这个例子中,我已经可以控制应用程序,但是我看不到哪些组件与 Redux 存储中的哪个字段相关。所以我只有在调度动作和更新商店时才能意识到这一点。
我可以从以下应用程序中访问一些数据吗?
{
AppComponent: {
connect: {
mapStateToProps: [{
...someFieldsJustHere
}]
}
},
AnotherComponent: {
...somethingSimilarToPreviousOne
}
}
我已经尝试使用 HOC 和装饰器,但我无法访问此类数据。现在玩react-test-renderer
和嘲笑商店。
更新:
我react-test-rendered
可以访问组件道具,包括来自connect
HOC 的道具,但现在我还不知道如何从 DOM 树中获取对真实组件的引用。
例子
const component = renderer.create(
<Root>
<App />
</Root>
);
console.log('rendered: ', component.toTree());
有任何想法吗?))