活跃用户

目前，Main 组件仅显示文本“main stuff”。

这并不是我们想要的效果。

最终目标是：在没有选中联系人时显示一个空白界面；当用户点击某个联系人后，才显示该用户的聊天消息。

接下来，我们来构建这个空白界面。

为此，我们需要创建一个名为 Empty.js 的新组件。同时，也创建对应的样式文件 Empty.css。

请将这两个文件放在 components 目录下。

<Empty /> 组件将负责渲染空白界面的结构内容。为了正确显示信息，它需要接收一个表示用户数据的 prop。

显然，这个用户数据应来自应用的状态（state）。别忘了我们之前确定的整体状态对象结构：

当前 <Main /> 组件的内容如下：

1import React from "react";
2import "./Main.css";
3const Main = () => {
4  return <main className="Main">Main Stuff</main>;
5};
6export default Main;

它只是返回了“Main Stuff”这段文字。

<Main /> 组件的作用是：当没有激活用户时，渲染 <Empty /> 组件；一旦某个用户被点击，则切换为显示该用户的聊天内容，这部分可以用一个 <ChatWindow /> 组件来表示。

为了实现这种渲染切换——即 <Main /> 根据情况渲染 <Empty /> 或 <ChatWindow />——我们需要跟踪一个状态：activeUserId。

例如，默认情况下 activeUserId 为 null，此时显示 <Empty /> 组件；

当用户点击某个联系人后，activeUserId 就会被设置为该联系人的 user_id，此时 <Main /> 将渲染 <ChatWindow /> 组件。

很清晰吧？

为了让这一机制生效，我们将在状态对象中新增一个字段：activeUserId。

你应该已经熟悉流程了。要向状态对象添加新字段，我们需要在 reducer 中进行配置。

在 reducers 文件夹中创建一个新文件：activeUserId.js。

文件内容如下：

reducers/activeUserId.js：

1export default function activeUserId(state = null, action) {
2  return state;
3}

默认返回 null。

接着，将这个新建的 reducer 注册到 combineReducers 调用中，如下所示：

1...
2import activeUserId from "./activeUserId";
3
4export default combineReducers({
5  user,
6  contacts,
7  activeUserId
8});

现在，如果你查看控制台日志，就能在状态对象中看到 activeUserId 字段了。

这部分内容信息量较大，请花些时间理解我们目前的进展。

下一节课我们将在此基础上继续推进。