Ruby on rails 是否尝试在CurrentUser的React DOM上反映CurrentUser的Redux状态更改？

我的应用程序是一个仪表板，允许公众查看某些项目，但不能查看CRUD。如果用户登录，则可以访问完整CRUD。我在Rails后端使用自转JWT/Bcrypt auth，在前端和状态管理中使用React/Redux。我想知道最好的策略是，当用户登录/注销时，让React DOM立即反映，并根据登录状态显示/消失某些项目，如创建按钮。现在，来自Redux商店的

this.props.currentUser

似乎没有帮助，即使Redux商店已经更新

我使用JSX三元运算符根据当前用户状态显示某些项。我试过

this.props.currentUser？示例：null

或

this.props.currentUser！==无效的示例：null

和

this.props.currentUser.length！==0 ? 示例：null

，我没有得到任何一致性（可能对一个component有效，但页面刷新不再有效，等等）

下面是一个示例组件：

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import { Container, Grid, Image } from "semantic-ui-react";
import { connect } from 'react-redux';
import logo from "../../images/logo-2-dashboard";
import { clearCurrentUser } from "../actions/clearCurrentUserAction";

class Header extends Component {

  logout = () => {
    localStorage.clear();
    this.props.clearCurrentUser()
    this.props.history.push("/");
  }

  render() {

    return (
      <>
        <Container fluid>
          <Grid divided>
            <Grid.Row columns={2}>
              <Grid.Column>
                <Image
                  src={logo}
                  size="large"
                  style={{ margin: "3px", padding: "2px" }}
                ></Image>
              </Grid.Column>
              <Grid.Column>

                 // Here's the kitchen sink approach lol 

                {this.props.currentUser && this.props.currentUser === null ||
                this.props.currentUser && this.props.currentUser.length === 0 ? (
                  <Link
                    to={"/login"}
                    onClick={this.props.login}
                    style={{ marginLeft: "200px" }}
                  >
                    Login
                  </Link>
                ) : (
                  <Link
                    to={"/"}
                    onClick={this.logout}
                    style={{ marginLeft: "200px" }}
                  >
                    Logout
                  </Link>
                )}

                 // SAME HERE 

                {this.props.currentUser && this.props.currentUser !== null ||
                this.props.currentUser && this.props.currentUser.length !== 0 ? (
                  <div>Logged in as: {this.props.currentUser.username}</div>
                ) : null}
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Container>
      </>
    );
  }
}

const mapStateToProps = state => {
    return {
        currentUser: state.currentUser.currentUser
    }
}

const mapDispatchToProps = dispatch => {
  return {
    clearCurrentUser: () => dispatch(clearCurrentUser())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Header));

和当前用户的减速器：

const initialState = {
  currentUser: [],
};

export const currentUserReducer = (state = initialState, action) => {
    switch (action.type) {
        case "SET_CURRENT_USER": 
            return { ...state, currentUser: action.payload }
        case "GET_CURRENT_USER":
            return { currentUser: action.payload }
        case "CLEAR_CURRENT_USER":
            return { currentUser: action.payload }
    default:
        return state;  
    }
};

---

也许这是完全错误的方法。我是一名在一家公司独立工作的大三学生

您正在检查currentUser是否为truthy，但您的initialstate是否为数组。currentUser reducer的初始状态应为null，而不是空数组

常量初始状态={
当前用户：null，
};
export const currentUserReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
案例“设置当前用户”：
返回{…状态，currentUser:action.payload}
案例“获取当前用户”：
返回{currentUser:action.payload}
案例“清除当前用户”：
返回{currentUser:action.payload}
违约：
返回状态；
}
};

const initialState = {
  currentUser: [],
};

export const currentUserReducer = (state = initialState, action) => {
    switch (action.type) {
        case "SET_CURRENT_USER": 
            return { ...state, currentUser: action.payload }
        case "GET_CURRENT_USER":
            return { currentUser: action.payload }
        case "CLEAR_CURRENT_USER":
            return { currentUser: action.payload }
    default:
        return state;  
    }
};