用 React + TypeScript 实现跨组件数据共享：useReducer 实战

作为一名技术博主，我总是热衷于探索新技术，并以独特的视角向读者展示它们。今天，让我们踏上一个激动人心的旅程，探索使用 React + TypeScript 构建应用程序时，如何利用 useReducer 实现跨组件数据共享。

代码结构示意图

为了方便理解，让我们先来看一下系统的代码结构示意图：

+--- src
|   +--- components
|   |   +--- TodoList.tsx
|   |   +--- TodoItem.tsx
|   |   +--- App.tsx
|   +--- context
|   |   +--- AppStateContext.tsx
|   |   +--- AppStateProvider.tsx

拆分 AppStateContext

下一步，我们将 AppStateContext 抽离到单独的文件目录中，如下所示：

+--- src
|   +--- components
|   |   +--- TodoList.tsx
|   |   +--- TodoItem.tsx
|   |   +--- App.tsx
|   +--- context
|   |   +--- AppStateContext.tsx
|   |   +--- AppStateProvider.tsx

使用 useReducer 实现数据共享

现在，让我们跳入实践。首先，在 AppStateContext 中定义我们的初始状态：

interface AppState {
  todos: Todo[];
}

const initialState: AppState = {
  todos: [],
};

接下来，创建 useReducer 自定义 Hook 来管理状态：

import { useReducer, Reducer, Dispatch } from 'react';

const useAppState = (): [AppState, Dispatch<AppAction>] => {
  const [state, dispatch] = useReducer<Reducer<AppState, AppAction>, AppState>(reducer, initialState);
  return [state, dispatch];
};

最后，在需要共享状态的组件中使用自定义 Hook：

import { useAppState } from './context/AppStateContext';

const TodoList = () => {
  const [state] = useAppState();
  return (
    <ul>
      {state.todos.map((todo) => <TodoItem key={todo.id} todo={todo} />)}
    </ul>
  );
};

结论

通过使用 useReducer，我们成功实现了跨组件的数据共享，使应用程序更易于管理和维护。遵循最佳实践，例如避免在组件之间直接传递 props，将使我们的代码更具可扩展性和可重用性。