相关疑难解决方法(0)

目前正致力于react + redux项目.

我还使用normalizr来处理数据结构并重新选择以收集应用程序组件的正确数据.

一切似乎都运作良好.

我发现自己处于类似叶子的组件需要来自商店的数据的情况,因此我需要connect()组件来实现它.

作为一个简化示例,假设该应用程序是一个图书编辑系统,有多个用户收集反馈.

Book
    Chapters
        Chapter
            Comments
        Comments
    Comments

在应用程序的不同级别,用户可以贡献内容和/或提供评论.

考虑我正在渲染章节,它有内容(和作者)和评论(每个都有自己的内容和作者).

目前我会connect()和reselect章节内容基于ID.

因为数据库是用normalizr规范化的,所以我实际上只获得章节的基本内容字段和作者的用户ID.

为了呈现注释,我将使用一个可以重新选择链接到章节的注释的连接组件,然后单独呈现每个注释组件.

同样,因为数据库是用normalizr规范化的,所以我真的只得到评论作者的基本内容和用户ID.

现在,为了呈现像作者徽章一样简单的东西,我需要使用另一个连接的组件从我拥有的用户ID中获取用户详细信息(在呈现章节作者和每个评论作者时).

该组件将是这样简单的东西:

@connect(
    createSelector(
        (state) => state.entities.get('users'),
        (state,props) => props.id,
        (users,id) => ( { user:users.get(id)})
    )
)
class User extends Component {

    render() {
        const { user } = this.props

        if (!user)
            return null
        return <div className='user'>
                    <Avatar name={`${user.first_name} ${user.last_name}`} size={24} round={true}  />
                </div>

    }
}

User.propTypes = {
    id : …