简单用 React+Redux+TypeScript 实现一个 TodoApp (二)

## 前言
[上一篇文章](https://github.com/hacker0limbo/my-blog/issues/13)讲了讲如何用 TypeScript + Redux 实现 `Loading` 切片部分的状态, 这篇文章主要想聊一聊关于 `Todo` 和 `Filter` 这两个切片状态的具体实现, 以及关于 [Redux Thunk](https://github.com/reduxjs/redux-thunk) 与 TypeScript 的结合使用.

想跳过文章直接看代码的: [完整代码](https://stackblitz.com/edit/react-redux-ts-todolist)

最后的效果: 
![todoapp](https://user-images.githubusercontent.com/36297538/98467314-9a173c80-220f-11eb-8672-2a20562aa5ef.png)

## Todo

首先思考一下 `Todo` 应该是怎样的状态, 以及可能需要涉及到的 `action`.

页面上的每一个 `todo` 实例都对应一个状态, 合起来总的状态就应该是一个数组, 这也应该是 `reducer` 最后返回的状态形式. 同时, 考虑 `action`, 应该有以下几种操作:
- 初始化页面的时候从服务端拿数据设置所有的 `todos`
- 增加一个 `todo`
- 删除一个 `todo`
- 更新一个 `todo`
- 完成 / 未完成一个 `todo`

这里需要注意的是, 所有的操作都需要和服务端交互, 因此我们的 `action` 是 **"不纯的"**, 涉及到异步操作. 这里会使用 [Redux Thunk](https://github.com/reduxjs/redux-thunk) 这个库来加持一下. `Action Creator` 写法也会变成对应的 `Thunk` 形式的 `Action Creator`

### types

每一个 `todo` 的状态类型应该如下:

```typescript
// store/todo/types.ts

export type TodoState = {
  id: string;
  text: string;
  done: boolean;
};
```

`id` 一般是服务端返回的, 不做过多解释. `text` 是 `todo` 的具体内容, `done` 属性描述这个 `todo` 是否被完成

### actions

#### actionTypes

还是和之前一样, 在写 `action` 之前先写好对应的类型, 包括每一个 `action` 的 `type` 属性

根据上面的描述, `type` 有如下几种:

```typescript
// store/todo/constants.ts

export const SET_TODOS = "SET_TODOS";
export type SET_TODOS = typeof SET_TODOS;

export const ADD_TODO = "ADD_TODO";
export type ADD_TODO = typeof ADD_TODO;

export const REMOVE_TODO = "REMOVE_TODO";
export type REMOVE_TODO = typeof REMOVE_TODO;

export const UPDATE_TODO = "UPDATE_TODO";
export type UPDATE_TODO = typeof UPDATE_TODO;

export const TOGGLE_TODO = "TOGGLE_TODO";
export type TOGGLE_TODO = typeof TOGGLE_TODO;
```

对应的 `actionTypes`, 就可以引用写好的常量类型了:

```typescript
// store/todo/actionTypes.ts

import { TodoState } from "./types";
import {
  SET_TODOS,
  ADD_TODO,
  REMOVE_TODO,
  UPDATE_TODO,
  TOGGLE_TODO
} from "./constants";

export type SetTodosAction = {
  type: SET_TODOS;
  payload: TodoState[];
};

export type AddTodoAction = {
  type: ADD_TODO;
  payload: TodoState;
};

export type RemoveTodoAction = {
  type: REMOVE_TODO;
  payload: {
    id: string;
  };
};

export type UpdateTodoAction = {
  type: UPDATE_TODO;
  payload: {
    id: string;
    text: string;
  };
};

export type ToggleTodoAction = {
  type: TOGGLE_TODO;
  payload: {
    id: string;
  };
};

export type TodoAction =
  | SetTodosAction
  | AddTodoAction
  | RemoveTodoAction
  | UpdateTodoAction
  | ToggleTodoAction;
```

#### actionCreators

这里需要注意, `todo` 部分的 `actions` 分为同步和异步, 先来看同步的:

```typescript
// store/todo/actions.ts

import {
  AddTodoAction,
  RemoveTodoAction,
  SetTodosAction,
  ToggleTodoAction,
  UpdateTodoAction
} from "./actionTypes";
import {
  ADD_TODO,
  REMOVE_TODO,
  SET_TODOS,
  TOGGLE_TODO,
  UPDATE_TODO
} from "./constants";
import { TodoState } from "./types";

export const addTodo = (newTodo: TodoState): AddTodoAction => {
  return {
    type: ADD_TODO,
    payload: newTodo
  };
};

export const removeTodo = (id: string): RemoveTodoAction => {
  return {
    type: REMOVE_TODO,
    payload: {
      id
    }
  };
};

export const setTodos = (todos: TodoState[]): SetTodosAction => {
  return {
    type: SET_TODOS,
    payload: todos
  };
};

export const toggleTodo = (id: string): ToggleTodoAction => {
  return {
    type: TOGGLE_TODO,
    payload: {
      id
    }
  };
};

export const updateTodo = (id: string, text: string): UpdateTodoAction => {
  return {
    type: UPDATE_TODO,
    payload: {
      id,
      text
    }
  };
};
```

同步部分没什么好说的, 核心是异步部分, 我们用 Redux Thunk 这个中间件帮助我们编写 Thunk 类型的 `Action`. 这种 `Action` 不再是纯的, **同时这个 `Action` 是一个函数而不再是一个对象**, 因为存在往服务端请求数据的副作用逻辑. 这也是 Redux 和 Flow 的一个小区别(Flow 规定 `Action` 必须是纯的)

首先我们需要配置一下 `thunk`, 以及初始化一下 `store`

```typescript
// store/index.ts

import { combineReducers, createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { loadingReducer } from "./loading/reducer";
import { todoReducer } from "./todo/reducer";

const rootReducer = combineReducers({
  todos: todoReducer,
  loading: loadingReducer,
  // filter: filterReducer,
});

export type RootState = ReturnType<typeof rootReducer>;

export const store = createStore(rootReducer, applyMiddleware(thunk));
```

#### Thunk Action Creator

不考虑类型, 如果纯用 JavaScript 写一个 `Thunk ActionCreator`, 如下:

```javascript
export const setTodosRequest = () => {
  return dispatch => {
    dispatch(setLoading("加载中..."));
    return fetch(baseURL)
      .then(res => res.json())
      .then(data => {
        dispatch(setTodos(data));
        dispatch(unsetLoading());
      });
  };
};
```

这里的 `baseURL` 在我第一章有说, 用了 mock api 模拟后端的数据, 具体地址可以看文章或者看源码, 同时为了方便, 我直接用浏览器原生的 `fetch` 做 http 请求了, 当然用 `axios` 等别的库也是可以的

关于这个函数简单说明一下, 这里的 `setTodosRequest` 就是一个 `Thunk ActionCreator`, 返回的 `(dispatch) => {}` 就是我们需要的 `Thunk Action`, 可以看到这个 `Thunk Action` 是一个函数, Redux Thunk 允许我们将 Action 写成这种模式

下面为这个 `Thunk ActionCreator` 添加类型, Redux Thunk 导出的包里有提供两个很重要的泛型类型: 
- [ThunkDispatch](https://github.com/reduxjs/redux-thunk/blob/80296ec9ef49410e2eb29b3531ceac094d5e03bd/src/index.d.ts#L20)
- [ThunkAction](https://github.com/reduxjs/redux-thunk/blob/80296ec9ef49410e2eb29b3531ceac094d5e03bd/src/index.d.ts#L50)

首先是 `ThunkDispatch`, 具体定义如下

```typescript
/**
 * The dispatch method as modified by React-Thunk; overloaded so that you can
 * dispatch:
 *   - standard (object) actions: `dispatch()` returns the action itself
 *   - thunk actions: `dispatch()` returns the thunk's return value
 *
 * @template TState The redux state
 * @template TExtraThunkArg The extra argument passed to the inner function of
 * thunks (if specified when setting up the Thunk middleware)
 * @template TBasicAction The (non-thunk) actions that can be dispatched.
 */
export interface ThunkDispatch<
  TState,
  TExtraThunkArg,
  TBasicAction extends Action
> {
  <TReturnType>(
    thunkAction: ThunkAction<TReturnType, TState, TExtraThunkArg, TBasicAction>,
  ): TReturnType;
  <A extends TBasicAction>(action: A): A;
  // This overload is the union of the two above (see TS issue #14107).
  <TReturnType, TAction extends TBasicAction>(
    action:
      | TAction
      | ThunkAction<TReturnType, TState, TExtraThunkArg, TBasicAction>,
  ): TAction | TReturnType;
}
```

至于具体怎么实现我不关心, 我关心的是这个东西是啥以及这个泛型接受哪些类型参数, 整理一下如下:
- 这个 `dispatch` 类型是由 Redux Thunk 修改过的类型, 你可以用它 `dispatch`:
  - 标准的 `action`(一个对象), `dispatch()` 函数返回这个对象 `action` 本身
  - `thunk action`(一个函数), `dispatch()` 函数返回这个 `thunk action` 函数的返回值
- 接受三个参数: `TState`, `TExtraThunkArg`, `TBasicAction`
  - `TState`: Redux store 的状态(`RootState`)
  - `TExtraThunkArg`: 初始化 thunk 中间件时, 传个 thunk 的额外参数(这个项目我们没用到)
  - `TBasicAction`: 非 Thunk 类型的 action, 即标准的对象 action 类型 

再看一下 `ThunkAction`:

```typescript
/**
 * A "thunk" action (a callback function that can be dispatched to the Redux
 * store.)
 *
 * Also known as the "thunk inner function", when used with the typical pattern
 * of an action creator function that returns a thunk action.
 *
 * @template TReturnType The return type of the thunk's inner function
 * @template TState The redux state
 * @template TExtraThunkARg Optional extra argument passed to the inner function
 * (if specified when setting up the Thunk middleware)
 * @template TBasicAction The (non-thunk) actions that can be dispatched.
 */
export type ThunkAction<
  TReturnType,
  TState,
  TExtraThunkArg,
  TBasicAction extends Action
> = (
  dispatch: ThunkDispatch<TState, TExtraThunkArg, TBasicAction>,
  getState: () => TState,
  extraArgument: TExtraThunkArg,
) => TReturnType;
```

整理一下参数类型和代表的意思:
- `ThunkAction` 指代的是一个 `thunk action`, 或者也叫做 `thunk inner function`
- 四个类型参数: `TReturnType`, `TState`, `TExtraThunkArg`, `TBasicAction`
  - `TReturnType`: 这个 `thunk action` 函数最后的返回值
  - `TState`: Redux store 的状态(`RootState`)
  - `TExtraThunkArg`: 初始化 thunk 中间件时, 传个 thunk 的额外参数(这个项目我们没用到)
  - `TBasicAction`: 非 Thunk 类型的 action, 即标准的对象 action 类型 

看完发现, 其实 `ThunkAction` 和 `ThunkDispatch` 真的很像, 对应到具体的参数类型: 
- `TState` 我们是有的, 即之前写过的 `RootState`
- `TExtraThunkArg` 我们没有用到, 可以直接给 `void` 或者 `unknown`
- `TBasicAction` 我们还没定义, 我见过有用 `Redux` 的 `AnyAction` 来替代, 但是 `AnyAction` 这个 any 有点过分...我搜索了一下没找到官方的最佳实践, 就打算用所有的 Redux 的 Action 类型集合

以及, Redux 官网的 [Usage with Redux Thunk](https://redux.js.org/recipes/usage-with-typescript#usage-with-redux-thunk) 其实已经有写怎么配置类型了. 现在需要做的事情其实就很简单:
- 增加一个 `RootAction` 类型, 为所有的非 Thunk 类型的 `Action` 的类型的集合
- 给 `ThunkDispatch` 这个泛型传入正确类型
- 给 `ThunkAction` 这个泛型传入正确类型

`store` 部分的代码如下:

```typescript
// store/index.ts

import { combineReducers, createStore, applyMiddleware } from "redux";
import { todoReducer } from "./todo/reducer";
import { loadingReducer } from "./loading/reducer";
import thunk, { ThunkDispatch, ThunkAction } from "redux-thunk";
import { LoadingAction } from "./loading/actionTypes";
import { TodoAction } from "./todo/actionTypes";

const rootReducer = combineReducers({
  todos: todoReducer,
  loading: loadingReducer,
  // filter: filterReducer,
});

export type RootState = ReturnType<typeof rootReducer>;
export type RootAction = LoadingAction | TodoAction;

export const store = createStore(rootReducer, applyMiddleware(thunk));

export type AppDispatch = ThunkDispatch<RootState, void, RootAction>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  void,
  RootAction
>;
```

为了方便, 这里给了两个 alias, 也是根据官网来的, 分别为 `AppDispatch` 和 `AppThunk`

现在可以完善之前的 `Thunk ActionCreator` 的类型了:

```typescript
export const setTodosRequest = (): AppThunk<Promise<void>> => {
  return dispatch => {
    dispatch(setLoading("加载中..."));
    return fetch(baseURL)
      .then(res => res.json())
      .then(data => {
        dispatch(setTodos(data));
        dispatch(unsetLoading());
      });
  };
};
```

这里注意一下, 由于我们的 `thunk action`, 是有返回值的, 这里是 `return fetch()` 返回的是一个 `promise`, 不过这个 `promise` 并没有 `resolve` 任何值, 所以即为 `Promise<void>`

最后完善一下所有的 `actionCreator`:

```typescript
// store/todo/actions.ts

import {
  AddTodoAction,
  RemoveTodoAction,
  SetTodosAction,
  ToggleTodoAction,
  UpdateTodoAction
} from "./actionTypes";
import { setLoading, unsetLoading } from "../loading/actions";
import {
  ADD_TODO,
  REMOVE_TODO,
  SET_TODOS,
  TOGGLE_TODO,
  UPDATE_TODO
} from "./constants";
import { TodoState } from "./types";
import { AppThunk } from "../index";
import { baseURL } from "../../api";

// https://github.com/reduxjs/redux/issues/3455
export const addTodo = (newTodo: TodoState): AddTodoAction => {
  return {
    type: ADD_TODO,
    payload: newTodo
  };
};

export const removeTodo = (id: string): RemoveTodoAction => {
  return {
    type: REMOVE_TODO,
    payload: {
      id
    }
  };
};

export const setTodos = (todos: TodoState[]): SetTodosAction => {
  return {
    type: SET_TODOS,
    payload: todos
  };
};

export const toggleTodo = (id: string): ToggleTodoAction => {
  return {
    type: TOGGLE_TODO,
    payload: {
      id
    }
  };
};

export const updateTodo = (id: string, text: string): UpdateTodoAction => {
  return {
    type: UPDATE_TODO,
    payload: {
      id,
      text
    }
  };
};

export const setTodosRequest = (): AppThunk<Promise<void>> => {
  return dispatch => {
    dispatch(setLoading("加载中..."));
    return fetch(baseURL)
      .then(res => res.json())
      .then(data => {
        dispatch(setTodos(data));
        dispatch(unsetLoading());
      });
  };
};

export const addTodoRequest = (text: string): AppThunk<Promise<void>> => {
  return dispatch => {
    return fetch(baseURL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ text, done: false })
    })
      .then(res => res.json())
      .then((data: TodoState) => {
        dispatch(addTodo(data));
      });
  };
};

export const removeTodoRequest = (todoId: string): AppThunk<Promise<void>> => {
  return dispatch => {
    return fetch(`${baseURL}/${todoId}`, {
      method: "DELETE"
    })
      .then(res => res.json())
      .then(({ id }: TodoState) => {
        dispatch(removeTodo(id));
      });
  };
};

export const updateTodoRequest = (
  todoId: string,
  text: string
): AppThunk<Promise<void>> => {
  return dispatch => {
    return fetch(`${baseURL}/${todoId}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ text })
    })
      .then(res => res.json())
      .then(({ id, text }: TodoState) => {
        dispatch(updateTodo(id, text));
      });
  };
};

export const toogleTodoRequest = (
  todoId: string,
  done: boolean
): AppThunk<Promise<void>> => {
  return dispatch => {
    return fetch(`${baseURL}/${todoId}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ done })
    })
      .then(res => res.json())
      .then(({ id }: TodoState) => {
        dispatch(toggleTodo(id));
      });
  };
};
```

这里说一点题外话, 其实 Redux 不用 Thunk 这种 middleware 来做异步请求也是可以的, 但是为啥还会有 `Redux Thunk` 这些库存在呢. 具体细节我之前写过一个回答, 有兴趣可以看一看: [redux中间件对于异步action的意义是什么？](https://www.zhihu.com/question/268586998/answer/1445321121)

### reducer

编写完复杂的 `ActionCreator`, `reducer` 相比就简单很多了, 这里直接贴代码了: 

```typescript
// store/todo/reducer.ts

import { Reducer } from "redux";
import { TodoAction } from "./actionTypes";
import {
  ADD_TODO,
  REMOVE_TODO,
  SET_TODOS,
  TOGGLE_TODO,
  UPDATE_TODO
} from "./constants";
import { TodoState } from "./types";

const initialState = [];

export const todoReducer: Reducer<Readonly<TodoState>[], TodoAction> = (
  state = initialState,
  action
) => {
  switch (action.type) {
    case SET_TODOS:
      return action.payload;
    case ADD_TODO:
      return [...state, action.payload];
    case REMOVE_TODO:
      return state.filter(todo => todo.id !== action.payload.id);
    case UPDATE_TODO:
      return state.map(todo => {
        if (todo.id === action.payload.id) {
          return { ...todo, text: action.payload.text };
        }
        return todo;
      });
    case TOGGLE_TODO:
      return state.map(todo => {
        if (todo.id === action.payload.id) {
          return { ...todo, done: !todo.done };
        }
        return todo;
      });
    default:
      return state;
  }
};
```

写完 `reducer` 记得在 `store` 中写入 `combineReducer()`

### selectors

最后是 `selectors`, 由于这部分是需要和 `filter` 切片进行协作, `filter` 部分下面会讲, 这里先贴代码, 最后可以再回顾

```typescript
// store/todo/selectors.ts

import { RootState } from "../index";

export const selectFilteredTodos = (state: RootState) => {
  switch (state.filter.status) {
    case "all":
      return state.todos;
    case "active":
      return state.todos.filter(todo => todo.done === false);
    case "done":
      return state.todos.filter(todo => todo.done === true);
    default:
      return state.todos;
  }
};

export const selectUncompletedTodos = (state: RootState) => {
  return state.todos.filter(todo => todo.done === false);
};
```

todo 部分基本完成了, 最后有一个点, Redux 文档中其实一直有提到, 不过之前我一直忽略, 这次看了 [redux 文档到底说了什么（上）](https://zhuanlan.zhihu.com/p/270583963) 文章才有注意到, 就是 [Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape). 这部分是关于性能优化的, 我自己的项目包括实习的公司项目其实从来都没有做过这一部分, 因此实战经验为 0. 有兴趣的可以去看看

## Filter

最后一个状态切片 `filter`, 这部分主要是为了帮助选择展示的 todo 部分. 由于这部分较为简单, 和 `loading` 部分类似, 居多为代码的罗列

### types

回顾之前想要实现的效果, TodoApp 底部是一个类似 tab 的组件, 点击展示不同状态的 todos. 总共是三部分:
- 全部(默认)
- 未完成
- 已完成

编写一下具体的类型:

```typescript
// store/filter/types.ts

export type FilterStatus = "all" | "active" | "done";

export type FilterState = {
  status: FilterStatus;
};
```

### actions

#### actionTypes

```typescript
// store/filter/constants.ts

export const SET_FILTER = "SET_FILTER";
export type SET_FILTER = typeof SET_FILTER;

export const RESET_FILTER = "RESET_FILTER";
export type RESET_FILTER = typeof RESET_FILTER;
```

```typescript
// store/filter/actionTypes.ts

import { SET_FILTER, RESET_FILTER } from "./constants";
import { FilterStatus } from "./types";

export type SetFilterAction = {
  type: SET_FILTER;
  payload: FilterStatus;
};

export type ResetFilterAction = {
  type: RESET_FILTER;
};

export type FilterAction = SetFilterAction | ResetFilterAction;
```

#### actions

```typescript
// store/filter/actions.ts

import { SetFilterAction, ResetFilterAction } from "./actionTypes";
import { SET_FILTER, RESET_FILTER } from "./constants";
import { FilterStatus } from "./types";

export const setFilter = (filterStatus: FilterStatus): SetFilterAction => {
  return {
    type: SET_FILTER,
    payload: filterStatus
  };
};

export const resetFilter = (): ResetFilterAction => {
  return {
    type: RESET_FILTER
  };
};
```

#### reducer

```typescript
import { Reducer } from "redux";
import { FilterAction } from "./actionTypes";
import { SET_FILTER, RESET_FILTER } from "./constants";
import { FilterState } from "./types";

const initialState: FilterState = {
  status: "all"
};

export const filterReducer: Reducer<Readonly<FilterState>, FilterAction> = (
  state = initialState,
  action
) => {
  switch (action.type) {
    case SET_FILTER:
      return {
        status: action.payload
      };
    case RESET_FILTER:
      return {
        status: "done"
      };
    default:
      return state;
  }
};
```

## Store

最后将所有 `store` 底下的 `actions`, `reducers` 集成一下, `store` 文件如下:

```typescript
import { combineReducers, createStore, applyMiddleware } from "redux";
import { todoReducer } from "./todo/reducer";
import { filterReducer } from "./filter/reducer";
import { loadingReducer } from "./loading/reducer";
import thunk, { ThunkDispatch, ThunkAction } from "redux-thunk";
import { FilterAction } from "./filter/actionTypes";
import { LoadingAction } from "./loading/actionTypes";
import { TodoAction } from "./todo/actionTypes";

const rootReducer = combineReducers({
  todos: todoReducer,
  filter: filterReducer,
  loading: loadingReducer
});

export type RootState = ReturnType<typeof rootReducer>;
export type RootAction = FilterAction | LoadingAction | TodoAction;

export const store = createStore(rootReducer, applyMiddleware(thunk));

export type AppDispatch = ThunkDispatch<RootState, void, RootAction>;

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  void,
  RootAction
>;
```

## 总结

至此所有关于 `store` 部分的代码已经全部完成了. 下一篇文章也就是最后一篇文章会完成 UI 部分, 讲一讲关于 `React`, `Hooks` 和 `TypeScript` 以及 `React Redux` 里相关 `Hooks` 的使用

## 参考
- https://zhuanlan.zhihu.com/p/270583963
- https://github.com/learn-redux/learn-redux
- https://redux.js.org/recipes/usage-with-typescript
- https://react-redux.js.org/using-react-redux/static-typing
- https://redux-toolkit.js.org/usage/usage-with-typescript

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

简单用 React+Redux+TypeScript 实现一个 TodoApp (二) #14

前言

Todo

types

actions

actionTypes

actionCreators

Thunk Action Creator

reducer

selectors

Filter

types

actions

actionTypes

actions

reducer

Store

总结

参考

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

简单用 React+Redux+TypeScript 实现一个 TodoApp (二) #14

Description

前言

Todo

types

actions

actionTypes

actionCreators

Thunk Action Creator

reducer

selectors

Filter

types

actions

actionTypes

actions

reducer

Store

总结

参考

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions