怎么在 Redux 中实现数据的取消加载功能？

在 Redux 中实现数据的取消加载功能，通常需要以下几个步骤：

1. **添加 Cancel Token** 或 **AbortController**：使用特定的库如 `redux-promise-middleware` 或 `redux-thunk` 配合 `AbortController` 可以创建一个可取消的请求。在发送异步请求时，初始化一个控制器（例如 `const controller = new AbortController()`），并将控制器的信号 (`signal`) 传递给网络请求。

2. **保存请求标识**：在 Redux 中，每次发起请求时，记录下请求的状态，比如一个包含请求 ID、控制器和回调的自定义结构，如 `{requestId: string, controller: AbortController, callback: Function}`。

3. **处理取消请求**：当用户尝试取消加载时，通过 Redux Store 的 dispatch 一个取消请求的 Action，携带对应的请求标识。在 Thunk 或 middleware 中，检查这个请求是否已经被标记为取消，如果是，则使用控制器的 `abort()` 方法中断请求。

4. **取消请求的处理函数**：在 Action Creator 或 middleware 中，当接收到取消请求的 Action，你需要查找对应的请求标识，找到相应的控制器并调用 `abort()`。这样，后续的网络请求会被自动终止。

5. **在组件中取消请求**：在 React 组件中，当你想取消某个请求时，订阅 store 的变化，当 store 的某个状态表示请求已取消时，调用外部提供的取消方法。

6. **清理资源**：在请求成功、失败或被取消后，确保清除与该请求相关的资源，例如从内存中移除对应的请求对象。

示例代码可能会这样实现：

// 创建一个新的 cancelAction Creator
export function cancelRequest(requestId) {
  return { type: CANCEL_REQUEST, payload: requestId };
}

// 在 middleware 中处理取消请求
const cancelMiddleware = (store) => next => async action => {
  if (action.type === CANCEL_REQUEST) {
    const request = store.getState().requests.find(r => r.id === action.payload);
    if (request) {
      request.controller.abort();
    }
  }
  return next(action);
};

// 在 Action Creator 或 thunk 中保存请求信息
export function fetchData(id, controller, callback) {
  return dispatch => {
    // 开始请求...
    const result = fetchSomeData(id, controller.signal)
      .then(response => callback(null, response))
      .catch(error => callback(error));

    dispatch({ type: FETCH_REQUEST, payload: { id, controller, result } });
    // 取消请求时调用这里
    return () => {
      dispatch(cancelRequest(id));
    };
  };
}