在Redux中跨组件传递或共享数据

Question

我是Redux的新手，所以这可能是我商店设计或理解的问题。

我的应用程序中有2个组件：

1. 导航组件根据网站呈现链接列表 来自API调用的响应。
2. 内容组件获取内容 对于在导航组件中选择的链接并呈现HTML。

这是我的雇主：

- index.js (building store here)
- actions
    - NavigationActions
    - ContentActions
- components 
    - Home 
    - Navigation
    - Content   
- containers
    - NavigationContainer
    - ContentContainer
- reducers
    - NavigationReduer (manages 'navigation' part of the store)
    - ContentReducer (manages 'content' part of the store)
    - RootReducer (combineReducers sits here)

我可以在加载应用程序时加载导航链接和内容（index.html）。在导航组件中单击链接时，我会调度一个操作，该操作将“selectedResource”键放在商店的“导航”部分中，该部分是所选链接。

我的问题是如何与Content组件共享“selectedResource”，以便它加载新资源并呈现它的HTML内容？

Answer 1

在您ContentContainer mapStateToProps时，您将执行以下操作：

const mapStateToProps = ({ NavigationState }) => {
  return {
    selectedResource: NavigationState.selectedResource
  };
}

export default connect(mapStateToProps)(ContentContainer);

要检测selectedResource中ContentContainer的变化，您可以：

componentDidUpdate(prevProps) {
  //May need some different comparison logic
  if(this.props.selectedResource != prevProps.selectedResource) {
      triggerNextAction();
  }
}