Redux - 只注入一筆使用者資料到 UserHeader
目前的 component 是從 props 取得整個 users 集合。
UserHeader component 看起來怪怪的，因為這個 component 的設計是只顯示一個使用者，不應該拿到所有使用者資料再從裡面找一筆出來。
為了只注入一筆 User 資料到 UserHeader，可以改 mapStateToProps 的實作
Commit
程式碼
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)