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)