22、深入探索 Redux 与 TypeScript 的代码验证技巧

深入探索 Redux 与 TypeScript 的代码验证技巧

1. Redux 与 React 组件中的数据处理

在 React 应用中使用 Redux 时， useSelector 这个钩子函数是一个强大的工具。它可以借助 TypeScript 泛型来指定整个状态的类型以及返回值的类型，这样就能将可用数据限制为组件所需的数据。例如，我们可以这样使用：

const state = useSelector<VenueState, VenueState>((state) => state);

而 dispatch 则再次使用了 thunk 函数，而非简单的动作类型。

在 Seat 组件中，有两个关键部分涉及 React 钩子的声明：

const state = useSelector<VenueState, VenueState>((state) => state);
const dispatch = useDispatch();

由于 Seat 组件使用了状态的多个部分，所以直接从 useSelector 返回整个状态会更方便。

当座位状态发生变化时， onSeatChange 方法会调用 dispatch 并传入 thunk 动作：