redux - inject one user data to UserHeader

Current component get users collection from props.

UserHeader component seems weird because the component is designed to show only one user, should not get all user data and find one of it,

In order to inject only one User data to UserHeader, can change implementation in mapStateToProps

Commit

https://github.com/shooeugenesea/study-js/commit/d69ff4ba8a4e6eb8022673ad91e4552c429881a4

Code

import React, {Component} from "react";

import {connect} from 'react-redux'

import {fetchUser} from "../actions";

class UserHeader extends Component {

    componentDidMount() {

        this.props.fetchUser(this.props.userId)

    }

    render() {

        return <div>Author: {this.props.user?.name}</div>

    }

}

const mapStateToProps = (state, props) => {

    return {user: state.users?.find(user => user.id === props.userId)}

}

export default connect(mapStateToProps, {fetchUser})(UserHeader)