Question

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

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

Answer 1

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

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

因此从某种意义上讲，任何未映射的东西都可以视为副作用。

如果要与redux-way对齐，则将要反应的mapStateToProps个属性传递给下一个，然后用mapDispatchToProps更改这些属性。

因此，在您的情况下，您将拥有某种Authentication服务，该服务将具有login，logout，register之类的方法，这些方法会将操作分派给您的redux store，然后在mapStateToProps中订阅类似isAuthenticated的内容。

然后在渲染中检查this.props.isAuthenticated ? <PrintSome> : null

您也可以按照基本相同的思路查看本教程，但是将其引入了更高阶的组件以实现可重用性https://medium.com/quick-code/adding-authentication-to-react-redux-firebase-app-f0efcb1c519a

Answer 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>
   );
  }
}

react-redux connect应该有副作用吗？

2 个答案: