摘要

• 這篇文章的目的是 ?
• TODO List 實作，基本中的基本
• 連結

這篇文章的目的是 ?

在開始之前，讓我們簡單介紹為什麼選擇 TODD List 作為我們的示例。TODD List 是一個簡單的任務清單應用程序，通過不同的方法實現它，我們可以更好地理解 React 中的狀態管理和組件通信的不同方式。

TODO List 實作，基本中的基本

1**. 使用 Functional Component 及 useState 寫 TODD List**

首先，我們將使用 Functional Component 和 useState 鉤子來建立一個簡單的 TODD List 應用程序。

jsxCopy code
import React, { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo) {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

在這個示例中，我們使用 useState 鉤子來管理待辦事項的狀態和新待辦事項的輸入。當按下 "Add Todo" 按鈕時，新的待辦事項將被添加到列表中。

2**. 使用 Functional Component 及 Redux 寫 TODD List**

接下來，我們將使用 Functional Component 和 Redux 來實現 TODD List 應用程序。

首先，確保你已經安裝了 Redux，並建立了一個 store、actions 和 reducers。

jsxCopy code
// TodoReducer.js
const initialState = {
  todos: [],
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state;
  }
};

export default todoReducer;

jsxCopy code
// TodoActions.js
export const addTodo = (todo) => {
  return {
    type: 'ADD_TODO',
    payload: todo,
  };
};

現在，我們將使用 Redux 來實現 TODD List：

jsxCopy code
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo } from './TodoActions';

function TodoApp() {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo) {
      dispatch(addTodo(newTodo));
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

在這個示例中，我們使用 Redux 來管理待辦事項的狀態和新增待辦事項的行為。我們使用 useDispatch 和 useSelector 鉤子來訪問 Redux store 中的狀態和調度動作。

3**. 使用 Functional Component 及 useReducer 寫 TODD List**

最後，我們將使用 Functional Component 和 useReducer 鉤子來實現 TODD List 應用程序。

jsxCopy code
import React, { useReducer, useState } from 'react';

const initialState = {
  todos: [],
};

const todoReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { todos: [...state.todos, action.payload] };
    default:
      return state;
  }
};

function TodoApp() {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo) {
      dispatch({ type: 'ADD_TODO', payload: newTodo });
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {state.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

在這個示例中，我們使用了 useReducer 鉤子來管理待辦事項的狀態和新增待辦事項的行為。使用 useReducer 可以更好地處理較複雜的應用程序邏輯。

這四個示例演示了在 React 中不同的狀態管理方法，從最簡單的 useState 到更複雜的 Redux 和 useReducer。選擇適合你的專案需求的方法，並深入研究相關的技術，以更好地理解 React 應用程序的開發。希望這些示例對你有所幫助！