试图在 React DOM 上为 CurrentUser 反映来自 CurrentUser 的 Redux 状态变化？

Posted 2023-03-10

【中文标题】试图在 React DOM 上为 CurrentUser 反映来自 CurrentUser 的 Redux 状态变化？

【英文标题】：Trying to reflect changes in Redux State from CurrentUser on React DOM for CurrentUser?

【发布时间】：2020-08-29 00:19:14

【问题描述】：

我的应用程序是一个仪表板，允许公众查看某些项目，但不能查看 CRUD。如果用户登录，则可以访问完整的 CRUD。我在 Rails 后端使用自制 JWT/Bcrypt 身份验证，在前端和状态管理中使用 React/Redux。我想知道让 React DOM 在用户登录/注销时立即反映的最佳策略，并根据登录状态让某些项目（如创建按钮）出现/消失。现在，即使 Redux 商店已经更新，来自 Redux 商店的this.props.currentUser 似乎也没有帮助。

我正在使用 JSX 三元运算符根据 currentUser 状态显示某些项目。我已经尝试过this.props.currentUser ? <button>Example</button> : null 或this.props.currentUser !== null ? <button>Example</button> : null 和this.props.currentUser.length !== 0 ? <button>example</button> : null，但我都没有得到任何一致性（可能适用于一个组件，但页面刷新不再有效，等等）。

这是一个示例组件：

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

这是我的 Redux Action Thunk，用于在注销时将 CurrentUser 设置回 null（我也在清除 localHistory）：

export const CLEAR_CURRENT_USER = 'CLEAR_CURRENT_USER'

export const clearCurrentUser = () => dispatch => 
     return dispatch( type: 'CLEAR_CURRENT_USER', payload: null )

和 currentUser 的 Reducer：

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;  
    
;

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

【参考方案1】：

您正在检查 currentUser 是否为真，但您的初始状态是一个数组。 currentUser reducer 的 initialState 应该为 null 而不是空数组。

const initialState = 
  currentUser: null,
;

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;  
    
;