react.js - react+redux登陆，注册，以及每次判断用户是否登陆展现用户名的功能？

问题描述

问 题

我用react-redux完成了登陆注册的功能后，有一个疑惑，是：
我每次登陆或者注册时，返回成功的状态都是一样的，即类似：

{
    "status": 1,
    "user": {
        "name": "张三"
    }
}

的数据，所以需要在header组件里面去分别定义两个接受login或登陆reg的数据：

        const userData = this.props.login;
        const regUserData = this.props.reg;

根据这两个变量去判断status的值，为1时，去隐藏登陆注册，显示用户名。
因为我这个是多页面react应用，所以我想到还要为每一个页面分别去判断用户的session，确定是否有登陆过，后台也会在此返回一个status的状态，这时候我就不知道怎么去写了。
因为header组件判断已经写烦了：

render() {
    const userLoginData = this.props.login;
    const userRegData = this.props.reg;
    
    return userData.status === 1 || regUserData.status===1 ? (
        <div>{userData.user? userData.user.name : regUserData.user.name}</div> )
        :
        (
        <div></div>
        )
    )

这样的判断我很醉了，然后接下来怎么写每个页面判断session登陆时返回的status状态数据。

解决方案

我这种思路有问题，已经改正，不应该在view层去通过state控制不同的显示元素，分歧应该在reducers层时就控制，从而返回相同的返回结果。本例子中，我的登陆，注册，页面渲染时判断的session时，都大致与登陆的效果相同，所有，我在这三种情况的处理数据时，reducer都通过login去控制返回给react的数据。

这篇关于react.js - react+redux登陆，注册，以及每次判断用户是否登陆展现用户名的功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！