Redux＆React以正确的方式处理数据

Posted 2021-05-05

假设以下情况：作为登录用户，您正在访问自己的个人资料页面。标题菜单会将您的头像显示为登录用户，页面的其余部分将显示您的用户公共信息。

您从api获得了一个用户列表，您需要处理其中两个用户的数据：登录用户和正在访问该个人资料页面的用户（在上面的情况中，它实际上是同一个用户）。复制store.users，store.currentUser和store.myUser中的数据将是一个非常糟糕的想法（需要在每次修改时同步这3次数据）。但是，每当在用户列表中修改一些lambda用户数据时，我不希望重新呈现使用当前或登录用户数据的组件。

您将如何进行以避免数据重复，加快数据处理时间（避免代价高昂的列表操作，如过滤/查找），并避免不必要的重新呈现？

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

store = {
  users: {
    1: {
      name: 'John',
    },
  },
  currentUser: 1,  // user which profile page is being accessed
  myUser: 1,       // logged in user
};

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

@connect(state => {user: state[state.currentUser]})
export default class UserDetails extends Component {
  render() {
    return <div>User profile: {this.props.user.name}</div>;
  }
}

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

@connect(state => {user: state[state.myUser]})
export default class HeaderMenu extends Component {
  render() {
    return <div>Logged-in user: {this.props.user.name}</div>;
  }
}

但我不相信这是一个理想的解决方案。将不得不测试是否真正避免重新渲染。非常欢迎你的想法！

答案

我会将登录用户的详细信息存储在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 (
            ...
        );
    }
}