javascript - Redux 应用程序中的 React Router 4 导航模式

Question

我目前正在开发一个简单的 React 应用程序，它有一个非常常见的工作流程，用户触发 Redux 操作，然后从 API 请求数据。但由于我想让这些操作的结果持久保存在 URL 中，所以我选择了 React Router v4 来帮助我完成这项工作。

我已经阅读了 React Router documentation 中的 Redux 集成说明但是将 history 对象传递给 Redux 操作的想法对我来说并不是最优雅的模式。由于 Redux 和 Router 的状态变化都会导致 React 组件重新渲染，我有点担心在这种情况下组件更新可能会有点失控。

因此，为了使重新渲染更具可预测性和顺序性，我提出了以下尝试遵循单向数据流原则的模式:

1. 我过去常常根据用户与 UI 的交互来触发 Redux 操作，现在我调用 React Router 的 props.history.push 来更新 URL。实际更改是关于更新 URL 参数而不是整个路由，但这可能与此处无关。

之前:

// UserSelector.jsx
handleUserChange = ({ target: selectElement }) => {
  // Some preliminary checks here...

  const userId = selectElement.value

  // Fire a Redux action
  this.props.setUser(userId)
}

之后:

// UserSelector.jsx
handleUserChange = ({ target: selectElement }) => {
  // Some preliminary checks here...

  const userId = selectElement.value

  // Use React Router to update the URL
  this.props.history.push(`/user-selector/${userId}`)
}

1. URL 中的 userId 更改导致 React Router 触发当前路由的重新渲染。

App.jsx 中的路由定义:

<Route path="/user-selector/:userId?" component={UserSelector} />

1. 在重新渲染期间，componentDidUpdate 生命周期钩子(Hook)被调用。在那里，我通过 React Router 的 props.match.params 对象比较了 URL 参数的先前值和当前值。如果检测到更改，则会触发 Redux 操作以获取新数据。

修改后的 UserSelector.jsx:

componentDidUpdate (prevProps) {
  const { match: { params: { userId: prevUserId } } } = prevProps
  const { match: { params: { userId } } } = this.props

  if (prevUserId === userId) {
    return
  }

  // Fire a Redux action (previously this sat in the onChange handler)
  this.props.setUser(userId)
}

1. 当结果准备就绪时，所有订阅 Redux 的 React 组件都会重新呈现。

这是我对代码结构的可视化尝试:

如果有人能验证这种模式是否可以接受，我将不胜感激。

Answer 1

对于第 3 步，我建议采用一种更符合 react-router 的不同方法:

• react-router 根据路由渲染组件
• 此组件应根据它匹配的特定路由充当处理程序(将其视为容器或页面组件)
• 当这个组件挂载后，你可以使用 componentWillMount 来获取(或同构获取)为自己/ child 加载数据
• 这样，您就不需要使用 componentDidUpdate 来检查 URL/params
• 不要忘记使用 componentWillUnmount 来取消获取请求，这样它就不会导致在您的 redux 状态下触发操作
• 不要使用 App 级别本身来获取数据，它需要在页面/容器级别完成

来自问题中提供的更新代码:

• 我建议将逻辑移出，因为您很可能需要与 componentDidMount 相同的逻辑(例如当您第一次访问该路由时，componentDidUpdate 只会在后续更改时触发，而不是在第一次渲染时触发)