React-Redux 连接应该有副作用吗?

Question

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

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

Answer 1

检查

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

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

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

如果要与 redux-way 保持一致，则传递要对其做出反应mapStateToProps属性，并使用mapDispatchToProps更改这些属性。

所以在你的情况下，你会有某种Authentication服务，它会有像login、logout、register这样的方法，它会将动作调度到你的 reduxstore，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中开发了一个化简器来记录用户是否已登录，并且您已将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>
);
}
}