React. js с Redux: получить информацию из состояния

Question

Я кодирую приложение и не могу решить проблему. Я сохранил информацию о пользователе в состоянии (когда я открываю Redux DevTools, я вижу состояние -> user: {username: name, role: ...}).

Теперь в некоторых компонентах я хочу проверьте, является ли авторизованный пользователь администратором или пользователем. Он у меня в таком состоянии, но как его загрузить в какой-нибудь класс? Когда я экспортирую функцию, я могу использовать const userRole = useSelector(state => state.security.user.role_id);, но в классе это создает проблему. Вы можете помочь мне?

это мой код для класса User, и я хочу отобразить кнопку DELETE, только если пользователь является администратором:

import React, {Component} from "react";
import PropTypes from "prop-types";
import {connect, useSelector} from "react-redux";
import { Link } from "react-router-dom";
import { deleteUser } from "../../store/actions/userActions";

class User extends Component{
    constructor() {
        super();}

    onDeleteClick(id) {
        this.props.deleteUser(id);
    }



    render() {

        const { user } = this.props;
        return (
            <div className='row entry'>
                <div className='col-sm-2'>
                    <span >{user.username}</span>
                </div>
                <div className='col-sm-2'>
                    <span >{user.name}</span>
                </div>
                <div className='col-sm-2'>
                    <span>{user.lastname}</span>
                </div>
                <div className='col-sm-2'>
                    <span>{user.tag}</span>
                </div>
                <div className='col-sm-1'>
                    <span>{user.pay}</span>
                </div>
                <div className='col-sm-1'>
                    <span>
                    {user.role_id}

                    </span>
                </div>
                <div className='col-sm-2'>
                    <Link to={`userlist/edituser:${user.id}`}>
                        <button><i className="fas fa-user-edit"></i></button>
                    </Link> | <button onClick={this.onDeleteClick.bind(this, user.id)}><i className="far fa-trash-alt"></i></button>

                </div>

            </div>
        )
    }


}


User.propTypes = {
    deleteUser: PropTypes.func.isRequired
};



export default connect(
    null, { deleteUser }
)(User);

Answer 1

С компонентами класса вы можете использовать connect HO C с mapStateToProps для доступа к состоянию из redux

class User extends Component{

    render() {

        const { user, userRole } = this.props;
        ...

    }
}



const mapStateToProps = (state) => {
   return {
       useRole: state.security.user.role_id,
   }
}

export default connect(
    mapStateToProps, { deleteUser }
)(User);