避免小项目使用redux过于臃肿！TypeScript环境下用useContext + useReducer实现数据共享！

2023-09-12 21:54:47

在 TypeScript 项目中，使用 Redux 进行状态管理可能会过于臃肿，尤其是对于小项目。为了解决这个问题，我们可以使用 useContext 和 useReducer 这两个内置的 React Hook 来实现数据共享。

useContext

useContext Hook 允许我们在组件树中共享数据，而无需使用 props 将数据层层传递。这对于共享全局数据非常有用，例如用户信息、语言偏好或主题选择。

import React, { useContext } from "react";

const ThemeContext = React.createContext("light");

const App = () => {
  const theme = useContext(ThemeContext);

  return (
    <div className={`app ${theme}`}>
      {/* ... */}
    </div>
  );
};

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      {children}
    </ThemeContext.Provider>
  );
};

export default App;

useReducer

useReducer Hook 允许我们在组件中管理状态，而无需使用类组件。它类似于 Redux 中的 reducer 函数，但它更轻量级，更易于使用。

import React, { useReducer } from "react";

const initialState = {
  count: 0
};

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};

export default App;

比较

特征	useContext	useReducer
用途	共享全局数据	管理组件状态
实现方式	通过上下文提供者和消费者	通过 reducer 函数和状态
优点	轻量级、易于使用	状态管理更灵活
缺点	只能共享简单的数据类型	对于复杂的状态管理可能过于简单