Reactjs Redux&；以正确的方式处理数据

假设以下情况：作为登录用户，您正在访问自己的配置文件页面。标题菜单将显示您作为登录用户的化身，页面的其余部分将显示您的用户公共信息

您从api获得了一个用户列表，需要处理其中两个用户的数据：登录用户和正在访问配置文件页面的用户（在上述情况下，实际上是同一个用户）。 复制

store.users

、

store.currentUser

和

store.myUser

中的数据将是一个非常糟糕的主意（每次修改数据时都需要同步这3次出现的数据）。但我不希望每次修改用户列表中的某些lambda用户数据时，都重新呈现使用当前或登录用户数据的组件

为了避免数据重复、加快数据处理时间（避免昂贵的列表操作，如筛选/查找），以及避免不必要的重新渲染，您将如何继续

经过一番思考，我正在考虑以这种方式实施， 数据存储如下：

store={
用户：{
1: {
姓名：'约翰'，
},
},
currentUser:1，//正在访问哪个配置文件页的用户
myUser:1，//已登录用户
};

现在，可以按如下方式连接UserDetails组件：

@connect（state=>{user:state[state.currentUser]}）
导出默认类UserDetails扩展组件{
render（）{
返回用户配置文件：{this.props.User.name}；
}
}

使用登录用户数据的页眉可以按如下方式连接：

@connect（state=>{user:state[state.myUser]}）
导出默认类HeaderMenu扩展组件{
render（）{
返回登录用户：{this.props.user.name}；
}
}

但我不相信这是一个理想的解决方案。必须测试是否真正避免了重新渲染。

---

欢迎你的想法

我会将登录用户的详细信息存储在Redux存储中。管理用户会话和呈现持久标头所需的任何数据。对于其他用户配置文件，我会从后端动态加载数据

例如，如果您有一个路由

/profile/：id

，这是URL

foo.com/profile/99

class Profile extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: null,
            loading: true
        };
    }
    componentDidMount() {
        api.get('/getUser', {userId: this.props.match.params.id}, response => {
            this.setState({
                user: response.user,
                loading: false
            });
        });
    }
    render() {
        return (
            ...
        );
    }
}

---

来自其他用户的数据在许多其他地方使用，因此无数次重新查询API是非常低效的。我从我的根组件延迟加载所有用户的公共数据，因此所有数据都可以从存储中获得，无需重新查询API以查找存储中已有的数据。@Fandekasp您是否根据您对什么更有效的意见对我投了反对票？您的方法不可扩展。在前端加载所有数据将使浏览器陷入困境。如果其他人从其他来源更新，数据将不同步。您正在编写更多可能不需要的代码，这使得您的代码库需要维护更多的工作。如果某些组件重复使用用户数据，则可以将数据从一个组件传递到另一个组件。当使用Redux存储有意义时，应该使用它。这不是管理所有应用程序数据的一揽子解决方案。由于我确实是根据个人意见而不是事实进行投票，因此恢复了投票。我正在尝试应用redux的3个原则，第一个是“单一真相来源”（即商店）。我还试图只在需要的地方保存数据，而不是将道具转发到无数组件上（但我意识到在这件事上我受到了GraphQL片段的影响）。无论如何，我仍然认为您的回答是错误的，因为API数据应该被视为不可变数据（如PROP），而组件状态变量是可变数据（加载是状态的一个很好的例子）