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: '打豆豆',
    done: false,
  },
];

export const todos = (state = initialState, action: any) => {
  return state;
};

• index.tsx 中

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

2. useSelector 的使用

目标：能够掌握 useSelector 在 TS 中的使用

内容：

• useSelector hook 是一个泛型函数，接收两个类型变量，分别来指定：

  1. 第一个类型变量：指定 Redux 仓库 state 的类型

  2. 第二个类型变量：指定要获取状态的类型

// useSelector 类型，源码如下：
// TState = DefaultRootState 是 泛型参数 的默认值，设置默认值后，将来在调用该函数时，可以省略该泛型参数不写
export function useSelector<TState = DefaultRootState, TSelected = unknown>(
	// 第一个参数：回调函数，用来获取 redux 状态的回调函数，通过回调函数的返回值来指定要获取的状态
  selector: (state: TState) => TSelected,
  // 第二个参数：可以拿到更新前后的两次状态，通过返回的布尔值就可以来知道状态是否发生变化
  equalityFn?: (left: TSelected, right: TSelected) => boolean
): TSelected;

useSelector 的两种使用方式：

1.指定泛型类型：