React: TypeScript:使用useReducer设置和获取全局上下文

import React, { useReducer } from 'react';

// 定义reducer函数
function reducer(state, action) {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    case 'SET_AGE':
      return { ...state, age: action.payload };
    default:
      return state;
  }
}

// 初始状态
const initialState = {
  name: '',
  age: 0
};

function App() {
  // 使用useReducer
  const [state, dispatch] = useReducer(reducer, initialState);

  // 设置全局上下文
  const setName = (name) => {
    dispatch({ type: 'SET_NAME', payload: name });
  };

  const setAge = (age) => {
    dispatch({ type: 'SET_AGE', payload: age });
  };

  return (
    <div>
      <input
        type="text"
        value={state.name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="number"
        value={state.age}
        onChange={(e) => setAge(e.target.value)}
      />
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
    </div>
  );
}

export default App;