React：TypeScript + react-redux + redux toolkit

目录

报错

redux toolkit简易使用笔记

---

报错

最初我也只是使用redux+react-redux+redux-thunk，但最近使用创建项目，使用dispatch出现了报错

TS2345: Argument of type 'RootThunkAction' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'RootThunkAction' but required in type 'AnyAction'. 

说没有type属性，reac-redux v7并不会出现该报错，新版v8才会

你可以通过any来避开这个报错（不推荐）

dispatch<any>(delTodo(id))

所以我就浅学了一下redux toolkit

redux toolkit简易使用笔记

---

store/index.ts

import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
import count from "./reducers/count";
const store = configureStore({
  reducer: {
    count,
  },
});
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;
export default store;

使用configureStore创建store

AppDispatch和RootState这两个类型是提供给useSelector, useDispatch用的

---

store/reducers/count.ts

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export const countSlice = createSlice({
  name: "count",
  initialState: {
    num: 0,
    status: "foo",
  } as Init,
  reducers: {
    add: (state) => {
      state.num += 1;
    },
    dec: (state) => {
      state.num -= 1;
    },
    custom: (state, action: PayloadAction<number>) => {
      state.num += action.payload;
    },
  },
  extraReducers: (builder) => {},
});

export const { add, dec, custom, changeStatus } = countSlice.actions;

export default countSlice.reducer;

用了createSlice，就可以省去了写actions这一步

countSlice.actions便可以导出定义在reducers里的方法，相当于action了

在组件中使用

import { useSelector, useDispatch } from "react-redux";
import { AppDispatch, RootState } from "../store";
import { add, asyncAdd, asyncDec, custom, dec, odd } from "../store/reducers/count";


export default function Home() {

  const dispatch = useDispatch<AppDispatch>();
  const count = useSelector((state: RootState) => state.count);

  return (
    <div>
      <input type="text" value={value} onChange={change} onKeyUp={keyUp} />
      <div>
        count:{count.num}---{count.status}
      </div>
      <button onClick={() => dispatch(add())}>+1</button>
      <button onClick={() => dispatch(dec())}>-1</button>
      <button onClick={() => dispatch(custom(Number(value)))}>自定义</button>
    </div>
  );
}

---

PayloadAction<>可以定义payload的类型，如果这次操作需要传参，这在这里定义好参数类型

例如

在调用的时候就能得到类型提示 

 

---

 如果涉及到异步操作，则要用到createAsyncThunk

export const asyncDec = createAsyncThunk("asyncDec", async () => {
  const res: number = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(-100);
      // reject();
    }, 1000);
  });
  return res;
});

在createSlice中的extraReducers处理异步操作

builder.addCase的第一个参数传入createAsyncThunk的返回值.pending(或fulfilled或rejected)，

分别是等待、完成、异常三个状态

export const countSlice = createSlice({
  name: "count",
  initialState: {
    num: 0,
    status: "foo",
  } as Init,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(asyncDec.pending, (state, action) => {
        state.status = "loading";
      })
      .addCase(asyncDec.fulfilled, (state, action) => {
        state.num += action.payload;
        state.status = "foo";
      })
      .addCase(asyncDec.rejected, (state, action) => {
        console.log("错误", state, action);
        state.status = "bar";
      });
  },
});

<button onClick={() => dispatch(asyncAdd())}>async+100</button>

---

redux toolkit官网地址：Redux Toolkit | Redux Toolkit

可以通过下面这行命令，快速下载一个官网提供的demo学习

npx create-react-app my-app --template redux-typescript