React / Redux: доступ к реквизитам внутри компонента подключения

Question

Обычно моя структура для компонента React / Redux выглядит следующим образом:

 .Component
  ├── Component.less
  ├── ComponentConnect.js
  └── ComponentUi.js

Файл для стиля, файл для соединения и другой для пользовательского интерфейса.Вот мой компонент подключения:

import { connect } from 'react-redux';
import actions from '../../redux/actions';
import selectors from '../../redux/selectors';
import ComponentUi from './ComponentUi';

export const ComponentConnect = connect(
    (state) => {

        return {
            friend: state.User ? state.User.friends.includes(this.props.id) : false,
        };
    },
    (dispatch) => {
        return {};
    }
)(ComponentUi);

export default ComponentConnect;

И это мой компонент пользовательского интерфейса:

import React from 'react';
import './Component.less';

class ComponentUi extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        return (
            <div className="Component">
                My stuff here
            </div>
        );
    }
}

export default ComponentUi;

Когда я хочу использовать компонент, я вызываю ComponentConnect, который получает реквизиты и передаетэто к ComponentUi.И, как вы можете видеть, в ComponentConnect я пытаюсь отфильтровать данные, возвращаемые Redux, и пытаюсь сделать это, обращаясь к props

state.User ? state.User.friends.includes(this.props.id) : false

Конечно, он возвращает ошибку, но яИнтересно, можно ли каким-то образом получить доступ к реквизиту?

Answer 1

Функция mapStateToProps вызывается с передачей props компонента в качестве второго параметра, поэтому вы можете сделать это:

(state, props) => {
    return {
        friend: state.User ? state.User.friends.includes(props.id) : false,
    };
},