React 项目中使用 TypeScript - Redux 基本使用

目录

1. Redux 基本使用

2. useSelector 的使用

3. 获取 Redux 仓库的状态类型 

4. reducer 函数的类型

5. TS 类型-常量断言

6. useDispatch 的使用 

7. React 事件对象的类型

8. redux-thunk 的使用

9. redux-thunk 新版本特性

1. Redux 基本使用

目标：能够掌握如何在 TS 项目中初始化 redux

内容：

• 安装依赖包：yarn add redux react-redux redux-devtools-extension redux-thunk

• 新建文件 store/index.ts（ 后缀为 .ts ）

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from './reducers';

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;

• 新建文件 store/reducers/index.ts

import { combineReducers } from 'redux';

import { todos } from './todos';

const rootReducer = combineReducers({
  todos,
});
export default rootReducer;

• 新建文件 store/reducers/todos.ts

type TodoList = {
  id: number;
  text: string;
  done: boolean;
};
const initialState: TodoList = [
  {
    id: 1,
    text: '吃饭',
    done: false,
  },
  {
    id: 2,
    text: '睡觉',
    done: true,
  },
  {
    id: 3,
    text: '