11.7添加OPEN_THREAD动作-React全家桶--前端开发与实例(下)

当前位置:　首页>> 技术小册>> React全家桶--前端开发与实例(下)

### 11.7 添加`OPEN_THREAD`动作

在构建复杂的前端应用，尤其是采用React全家桶（React、Redux、React Router等）进行开发时，管理应用的状态变得尤为重要。Redux作为状态管理库，通过其单一的状态树、纯函数（reducer）以及可预测的行为，为应用的状态管理提供了强大的支持。本章节将详细探讨如何在Redux架构中添加一个新的动作（Action）`OPEN_THREAD`，以实现在前端应用中打开或激活特定线程（如聊天室、论坛帖子等）的功能。

#### 11.7.1 理解`OPEN_THREAD`动作的需求

在开发一个包含聊天、论坛或任何需要用户能够查看和交互特定“线程”内容的Web应用时，`OPEN_THREAD`动作是一个基础且关键的功能。该动作应能够响应用户操作（如点击一个链接或按钮），将应用的状态更新为当前选中的线程，并据此渲染相应的内容。

#### 11.7.2 设计`OPEN_THREAD`动作类型

在Redux中，每个动作都是一个具有`type`属性的普通JavaScript对象，可选地还可以包含一些与动作相关的数据（payload）。首先，我们需要为`OPEN_THREAD`动作定义一个唯一的类型字符串。

```javascript
// actionTypes.js
export const OPEN_THREAD = 'OPEN_THREAD';
```

这个`OPEN_THREAD`类型将用于在Redux的reducer中识别和处理这个特定的动作。

#### 11.7.3 创建`OPEN_THREAD`动作创建函数

接下来，我们需要创建一个函数来生成`OPEN_THREAD`动作。这个函数将接受一个参数（通常是线程的唯一标识符），并将其作为payload包含在动作对象中。

```javascript
// actions.js
import { OPEN_THREAD } from './actionTypes';

export const openThread = (threadId) => {
  return {
    type: OPEN_THREAD,
    payload: { threadId }
  };
};
```

这个`openThread`函数可以被应用的任何部分调用，以触发`OPEN_THREAD`动作。

#### 11.7.4 更新Redux Reducer以处理`OPEN_THREAD`

在Redux中，reducer是一个函数，它接收当前的状态和一个动作作为参数，并返回一个新的状态。现在，我们需要更新应用的reducer以识别并处理`OPEN_THREAD`动作。

假设我们的应用状态树中有一个专门用于管理当前打开线程的部分，我们可以这样更新reducer：

```javascript
// reducers/threadReducer.js
import { OPEN_THREAD } from '../actionTypes';

const initialState = {
  currentThreadId: null, // 初始时没有打开的线程
};

function threadReducer(state = initialState, action) {
  switch (action.type) {
    case OPEN_THREAD:
      return {
        ...state,
        currentThreadId: action.payload.threadId,
      };
    default:
      return state;
  }
}

export default threadReducer;
```

在这个reducer中，我们根据`action.type`来判断是否需要处理该动作。如果动作类型是`OPEN_THREAD`，我们就更新`currentThreadId`为动作payload中的`threadId`。

#### 11.7.5 将`threadReducer`集成到根Reducer

在Redux应用中，通常会有一个根reducer，它负责将多个子reducer（如`threadReducer`）的结果合并成一个单一的状态树。如果你的应用还没有这样的结构，现在需要创建一个。

```javascript
// reducers/index.js
import { combineReducers } from 'redux';
import threadReducer from './threadReducer';

const rootReducer = combineReducers({
  threads: threadReducer, // 假设我们将线程相关的状态放在'threads'键下
  // ... 其他reducer
});

export default rootReducer;
```

#### 11.7.6 在组件中分发`OPEN_THREAD`动作

现在，我们已经有了生成`OPEN_THREAD`动作的函数和在Redux中处理该动作的逻辑，接下来是在React组件中触发这个动作。

```javascript
// ThreadList.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { openThread } from '../actions';

function ThreadList({ threads }) {
  const dispatch = useDispatch();

return (
    <ul>
      {threads.map(thread => (
        <li key={thread.id} onClick={() => dispatch(openThread(thread.id))}>
          {thread.title}
        </li>
      ))}
    </ul>
  );
}

export default ThreadList;
```

在这个`ThreadList`组件中，我们为每个线程项添加了一个点击事件处理函数，该函数使用`dispatch`函数分发`openThread`动作，并传入被点击线程的ID。

#### 11.7.7 使用Redux状态更新UI

最后，我们需要在应用的适当部分使用Redux的状态来渲染当前打开的线程内容。这通常涉及从Redux store中获取`currentThreadId`，并根据这个ID从线程数据中检索相应的线程内容。

```javascript
// ThreadViewer.js
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';

function ThreadViewer() {
  const currentThreadId = useSelector(state => state.threads.currentThreadId);
  const threads = useSelector(state => state.someOtherReducer.threads); // 假设线程数据存储在另一个reducer中
  const currentThread = threads.find(thread => thread.id === currentThreadId);

useEffect(() => {
    // 这里可以添加一些副作用，比如根据currentThreadId加载更多数据
  }, [currentThreadId]);

if (!currentThread) {
    return <div>No thread selected.</div>;
  }

return (
    <div>
      <h1>{currentThread.title}</h1>
      <p>{currentThread.content}</p>
      {/* ... 其他与线程相关的UI元素 */}
    </div>
  );
}

export default ThreadViewer;
```

在这个`ThreadViewer`组件中，我们使用`useSelector`钩子从Redux store中获取当前打开的线程ID和线程数据，然后根据这些数据渲染相应的UI。

### 总结

通过添加`OPEN_THREAD`动作，我们扩展了Redux应用的功能，使其能够响应用户操作来打开或激活特定的线程。这一过程涉及定义动作类型、创建动作创建函数、更新reducer以处理新动作、在组件中分发动作，并根据Redux的状态更新UI。这样的设计模式不仅使应用的状态管理更加清晰和可预测，还提高了代码的模块化和可维护性。

该分类下的相关小册推荐：

深入学习React实战进阶

ReactJS面试指南

React 进阶实践指南

React全家桶--前端开发与实例(上)

剑指Reactjs