react-redux 连接应该有副作用吗？答案

【问题标题】：react-redux connect should have side effects?react-redux 连接应该有副作用吗？
【发布时间】：2019-03-25 16:22:13
【问题描述】：

我有一个需要已登录用户数据的组件，但在此组件中我不确定用户是否已登录检查 mapStateToProps 中的存在数据并在需要时重定向到登录页面是一种不好的做法吗？这是副作用吗？那么获取状态中存在的数据呢？我该如何处理这些问题？

在mapState中我们应该做什么，不应该做什么？有什么好的做法吗？

【问题讨论】：

您应该向我们提供您正在使用的代码库，因为您的问题接近于基于意见并且过于广泛，但由于缺乏关于你的一部分。

标签： redux react-redux

【解决方案1】：

检查 mapStateToProps 中存在的数据并在需要时重定向到登录页面是一种不好的做法？

我不确定这是否是最佳实践，但如果我们查看 mapStateToProps 的语义，它的主要用途是将 redux 状态映射到组件 props。

所以从这个意义上说，任何不是映射的东西都可以被认为是副作用。

如果您想与 redux-way 保持一致，那么您可以传递您想要响应的 mapStateToProps 属性，然后使用 mapDispatchToProps 更改这些属性。

因此，在您的情况下，您将拥有某种Authentication 服务，该服务将具有login、logout、register 之类的方法，它将向您的redux store 和@987654332 调度操作@你会订阅类似isAuthenticated的东西。

在你的渲染中你会检查this.props.isAuthenticated ? <PrintSome> : null

您也可以使用基本相同的想法查看本教程，但将其放入更高阶的组件中以实现可重用性https://medium.com/quick-code/adding-authentication-to-react-redux-firebase-app-f0efcb1c519a

【讨论】：

感谢您的回答。我已阅读您建议的文章，但我不明白应该由谁处理重定向到 /login ？
@MHA15 medium.com/quick-code/… 代码示例中的第 13 行

【解决方案2】：

假设您已经在src/components/App.js 组件中定义了路由。您现在需要确保您的 App 组件知道用户是否真正登录。

我们还假设您已经在reducers/auth.js 中开发了一个reducer 来记录用户是否登录，并且您已将authReducer 分配给您的auth 状态。

此时，您需要在 src/components/App.js 文件中导入：

import { connect } from 'react-redux';

然后在App 组件的底部，您需要像这样定义mapStateToProps：

function mapStateToProps(state) {
  return { auth: state.auth }
}

export default App;

所以我上面的建议是将state 传递给mapStateToProps，然后传递return 一个具有auth 键的对象，这将采用来自authReducer 的任何值。

然后你把你导入的connect() 函数传递给它，像这样传递mapStateToProps：

export default connect(mapStateToProps)(App);

所以现在您的App 组件知道用户是否已登录。

那么实施上述方法有什么好处呢？好吧，它使您可以灵活地根据用户是否登录来确定在视图中显示什么。例如，登录/退出按钮。

您现在可以使用具有如下条件的辅助方法开发该按钮：

renderButton() {
  if (this.props.auth) {
   return (
     <button>
       Sign Out
     </button>
   );
  } else {
   return (
     <button>
       Sign In
     </button>
   );
  }
}

【讨论】：