React 系列 : Redux + TypeScript

前言

前幾天寫過一篇關於 react + TS 的簡單入門，大致上就是說說 TS 的強大以及基本怎麼跟 react 配合起來，若不清楚歡迎先去看看 React 搭配 TypeScript 新手入門。這篇算是接著談談，redux + TS 怎麼配合，分享一些寫法等等。

正文

接下來這篇會用 redux + TS 做一個相對完整一點的 todo 應用，本篇嘗試使用一個新的組件庫 chakra UI，聽說是個相對新的組件庫，個人覺得挺酷的想來試試看。

首先為了更好的組織代碼，我們先在 /src 下新建一個 store 文件夾，存放所有與狀態管理相關 redux 的代碼。

Store

因為本篇主要想延續上一篇說說 TS 配合 redux，所以我們新建一個 types.ts 文件，專門用來定義狀態類型。

// store/types.ts

export interface Todo {
   
  id: number;
  text: string;
  done: boolean;
}

export interface Store {
   
  todos: Todo[];
  newTodo: string;
}

我的一個 Todo 包含一個 id，text 表示 todo 描述，done 表示完成了沒。

而我們的 Store 類型則包含很多個 todo 以及一個 newTodo 用於存儲新增 todo 時的綁定變量，其實後面我發現這個 newTodo 其實更適合直接放在添加 todo 的組件中，但為了演釋一下 redux，我不想讓 Store 類型只有一個東西(hhh)。

Actions

首先我們先分析一下這個 todo 應用想完成哪些功能，我完成的基本功能如下：

• addTodo: 添加一個 todo
• deleteTodo: 刪除一個 todo
• updateTodo: 更新一個 todo
• toggleTodo: 勾起一個 todo，為勾起表示還沒完成
• setNewTodo: 設置全局 store 中的 newTodo
• setTodos: 設置一組 todo
• loadTodos: 從第三方加載一些 todo(s)

基本同步 actions

我接著在 store 下面新建 actions 文件夾，放 redux 所需要的 actions 的代碼。

// /store/actions.ts

import {
    Todo, Store } from "./types";
import axios from "axios";
import {
    ThunkAction } from "redux-thunk";
import {
    Action } from "redux";

export const ADD_TODO = "ADD_TODO";
export const DELETE_TODO = "DELETE_TODO";
export const UPDATE_TODO = "UPDATE_TODO";
export const TOGGLE_TODO = "TOGGLE_TODO";
export const SET_NEWTODO = "SET_NEWTODO";
export const SET_TODOS = "SET_TODOS";
export const LOAD_TODOS = "LOAD_TODOS";

export type ActionTypes =
  | {
    type: typeof ADD_TODO }
  | {
    type: typeof DELETE_TODO; payload: number }
  | {
   
      type: typeof UPDATE_TODO;
      payload: {
   
        id: number;
        text: string;
      };
    }
  | {
    type: typeof TOGGLE_TODO; payload: number }
  | {
    type: typeof SET_NEWTODO; payload: string }
  | {
    type: typeof SET_TODOS; payload: Todo[] }
  | {
    type: typeof LOAD_TODOS