消息组件

我们之前构建过一些较为复杂的组件。

而这次要构建的组件并不会太难，但有一个要点需要注意。

Input 组件将作为一个受控组件。

因此，我们会把输入框的值存储在应用的状态对象中。

为此，我们需要在状态对象中新增一个名为 typing 的字段。

现在就来添加它。

考虑到这一点，每当用户输入内容时，我们将分发一个 SET_TYPING_VALUE 类型的动作。请务必将这个常量添加到 constants/action-types.js 文件中：

1export const SET_TYPING_VALUE = "SET_TYPING_VALUE";

此外，所分发的动作结构如下所示：

1{
2  type: SET_TYPING_VALUE,
3  payload: "输入的内容"
4}

上述动作中的 payload 即为用户在输入框中键入的值。接下来，我们创建一个 action creator 来处理该动作的生成：

actions/index.js:

1import {
2  SET_ACTIVE_USER_ID,
3  SET_TYPING_VALUE
4} from "../constants/action-types";
5...
6export const setTypingValue = value => ({
7  type: SET_TYPING_VALUE,
8  payload: value
9})

现在，我们来创建一个新的 reducer —— typing reducer，用于处理这个新创建的动作。

reducers/typing.js

1import { SET_TYPING_VALUE } from "../constants/action-types";
2export default function typing(state = "", action) {
3  switch (action.type) {
4    case SET_TYPING_VALUE:
5      return action.payload;
6    default:
7      return state;
8  }
9}

typing 字段的默认值设为空字符串：

1.png

当分发类型为 SET_TYPING_VALUE 的动作时，reducer 将返回 action.payload 中的值。

handle the SET_TYPING_VALUE type

否则，返回默认状态 ""。

3.png

请确保将这个新建的 reducer 添加到 combineReducers 函数的调用中。

reducers/index.js:

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

请检查日志，确认 state 对象中确实已包含 typing 字段。

完成以上步骤后，我们就可以开始正式构建实际的组件了。