第六章 React 状态管理Redux

步骤1：创建React应用

首先，确保你已经安装了Node.js和npm。然后，在你选择的项目目录中，打开终端（命令提示符）并运行以下命令来创建一个新的React应用，这个应用将使用TypeScript：

lua 复制代码

npx create-react-app my-todo-app --template typescript

上述命令创建了一个名为my-todo-app的React应用，并使用了TypeScript模板。等待项目创建完成。

步骤2：创建Redux相关文件

在项目的src目录下创建以下文件和文件夹：

store.ts：Redux store的配置文件，用于创建Redux store。
reducers.ts：Redux reducer文件，用于定义应用的状态和操作。
actions.ts：Redux actions文件，用于定义各种操作。
components文件夹：用于存放React组件文件。

步骤3：编写Redux Store

在store.ts文件中，你需要创建一个Redux store并将它导出，代码如下：

javascript 复制代码

// src/store.ts
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

这段代码创建了一个Redux store，它使用rootReducer来管理应用的状态。

步骤4：定义Redux Reducer和Actions

在reducers.ts文件中，你需要定义Redux reducer来管理应用的状态。在actions.ts文件中，你需要定义Redux actions来描述各种操作。这是一个非常简单的示例，只包括了添加、标记完成和删除任务的操作。

typescript 复制代码

// src/reducers.ts
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface AppState {
  todos: Todo[];
}

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

const rootReducer = (state = initialState, action: { type: string, payload: any }) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.payload
            ? { ...todo, completed: !todo.completed }
            : todo
        ),
      };
    case 'DELETE_TODO':
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
};

export default rootReducer;
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export const addTodo = (todo: Todo) => ({
  type: 'ADD_TODO',
  payload: todo,
});

export const toggleTodo = (id: number) => ({
  type: 'TOGGLE_TODO',
  payload: id,
});

export const deleteTodo = (id: number) => ({
  type: 'DELETE_TODO',
  payload: id,
});

步骤5：创建React组件

在components文件夹中，创建一个名为TodoList.tsx的文件，这是我们的React组件，用于渲染待办事项列表和处理用户操作。

typescript 复制代码

// src/components/TodoList.tsx
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, toggleTodo, deleteTodo } from '../actions';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

function TodoList() {
  const [newTodo, setNewTodo] = useState<string>('');
  const todos = useSelector((state: { todos: Todo[] }) => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      dispatch(addTodo({
        id: Date.now(),
        text: newTodo,
        completed: false,
      }));
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        placeholder="Add a new task"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{
                textDecoration: todo.completed ? 'line-through' : 'none',
              }}
              onClick={() => dispatch(toggleTodo(todo.id))}
            >
              {todo.text}
            </span>
            <button onClick={() => dispatch(deleteTodo(todo.id))}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在这个示例中，我们首先添加了Todo接口来描述待办事项的类型，然后在组件中使用了类型定义，以确保我们正确地使用了组件的props和状态。

步骤6：创建根组件和渲染

在src/App.tsx文件中，创建应用的根组件，并将它包装在Provider组件中，以便连接到Redux store。

javascript 复制代码

// src/App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './components/TodoList';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <TodoList />
      </div>
    </Provider>
  );
}

export default App;

这个组件只包含一个TodoList组件，它通过Provider提供的store连接到了Redux store。

步骤7：渲染应用

最后，在src/index.tsx文件中，确保正确渲染整个应用。

javascript 复制代码

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

现在，你已经将示例代码迁移到了TypeScript格式的React应用中。你可以根据需要在组件和Redux相关文件中添加类型定义，以提高代码的可维护性和安全性。希望这能帮助你开始使用