React/Redux :事件-最新技术

Question

React实现基于事件的模式(发布者/订阅者)的最新技术是什么？

一方面，我们有监听这些事件的组件。这些组件中的一些是可视的，例如，绘制查询结果的图表可能不是可视的，例如，如果我们想要管理查询和结果的组件。

另一方面，任何组件都可以生成事件。

我们的第一个想法是在Redux中添加事件及其值的完整列表，并在shouldComponentUpdate()中实现的每个组件上添加一个智能代码，如果组件没有侦听更改的事件，该代码将停止。

这看起来并不是很优雅，因为所有组件都会监听所有事件。有没有更优雅的解决方案(某种最先进的解决方案)？

当然，我们希望能够返回、转发、保存状态和所有这些小细节:-)

Answer 1

我认为你需要知道的与其说是“最先进的技术是什么”，不如说是用React和Redux发布和订阅的“什么是规范的方式”。

简而言之，如果您有一个足够复杂的应用程序，您应该组织您的存储，以便将应用程序状态划分为slices，并使用container pattern来分离发布和订阅的责任。这样，您就避免了您提到的问题，即您不知道代码库中的哪些内容正在更改存储以及哪些内容正在响应这些更改。您可以查看容器组件，了解它如何处理来自其子组件的UI事件并生成状态更改事件。或者，您可以查看容器如何处理状态更改，然后向下钻取层次结构。如果您可以让Redux切片承担单个容器的责任，那么考虑事件就容易得多。所有其他组件本身并不订阅事件，而是从源自容器组件的属性中接收需要呈现的更改。它们通过通过props向下传递的回调来通知容器组件它们自己的事件，这样容器就可以发布它们。这可能会有很长很长的路要走，如果你觉得你需要传递太多的道具，你可以使用React.children来扁平化嵌套，或者在极少数情况下上下文。

更长的答案有点困难，因为当谈论React时，发布和订阅并不是特别有意义。React最终应该对渲染负责。正如您所提到的，并非所有事件都是UI事件。但是，如果您的模型使您可以发布和订阅的所有事件归结为更改商店或对商店更改做出反应，那么您可以更专注于Redux来构建您的应用程序。您所讨论的查询和结果的管理应该在没有React的简单JavaScript模块中完成。然后，您可以使用容器组件将存储粘合到该模块。

还有一些人们使用的额外模式，比如动作创建者和选择者。这些都很好，因为至少目的是让代码库保持熟悉。但随着React向Hooks API和React-Redux trying to catch-up发展，事情仍然进展得有点快。但是切片和容器组件不会有任何用武之地，它们是分离关注点的自然方式。

Answer 2

redux用于存储事件重新选择/连接以订阅它们(https://github.com/reduxjs/reselect#connecting-a-selector-to-the-redux-store)

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { getVisibleTodos } from '../selectors'

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

现在你有了你的订阅事件作为组件中的道具，只有当道具改变时，组件才会重新呈现。不需要shouldComponentUpdate，因为您的组件不必监听整个存储区，它只会获取您在选择器中定义的存储区部分。