带有React Redux的TypeScript，连接类型

// actions.ts
export const ADD_TODO = 'ADD_TODO' as const;

interface AddTodoAction {
  type: typeof ADD_TODO;
  payload: string;
}

export type TodoActions = AddTodoAction;

// reducer.ts
import { ADD_TODO } from './actions';

interface TodoState {
  todos: string[];
}

const initialState: TodoState = {
  todos: []
};

export function todoReducer(state = initialState, action: TodoActions): TodoState {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload]
      };
    default:
      return state;
  }
}

// Todo.tsx
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from './store'; // 假设你有一个 RootState 类型定义
import { ADD_TODO, TodoActions } from './actions';

const Todo: React.FC = () => {
  const dispatch = useDispatch<TodoActions>();
  const todos = useSelector((state: RootState) => state.todos);

  const handleAddTodo = (text: string) => {
    dispatch({ type: ADD_TODO, payload: text });
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={() => handleAddTodo('New Todo')}>Add Todo</button>
    </div>
  );
};

export default Todo;

// store.ts
import { createStore } from 'redux';
import { todoReducer } from './reducer';

export type RootState = ReturnType<typeof todoReducer>;

const store = createStore(todoReducer);

export default store;