redux 工具包 createAsyncThunk 打字稿错误

Question

我正在尝试使用 @reduxjs/toolkit 和 typescript 调用 API 端点。

我按照这里的例子，没有成功https://redux-toolkit.js.org/api/createAsyncThunk

我遇到了一些打字错误，我做错了什么？

1°error：当我像在 MessageController.tsx 中那样进行调度时，打字稿说： “AsyncThunk”类型的参数不能分配给“AnyAction”类型的参数。 'AsyncThunk' 类型中缺少属性 'type' 但在 'AnyAction'.ts(2345) 类型中是必需的 index.d.ts(19, 3): 'type' 在这里声明。

2° 错误：在 message.slice.ts 中，每当我执行 message.fulfilled 或 denied 或 pending 时，我都会得到： 类型 '(data: any) => AsyncThunk'.ts(2339)

上不存在属性 'fulfilled'

message.slice.ts

export const sendMessage = ( data) =>createAsyncThunk(
    `message/sendMessage`,
    async (data, thunkAPI) => {
        const response = await axios.post
        ( `/api/v1/xxx/test-messages`,
        data,
        httpOptions(getDefaultHeaders()));

       return response.data;
      }
    )
    
    
    
    const messageSlice = createSlice({
    name: "message",
    initialState: {
       message: {},
       loading: "idle",
       error: "",
    },
    reducers: {},
    extraReducers: (builder) => {
       builder.addCase(sendMessage.pending, (state) => {
         state.message = {};
           state.loading = "loading";
       });
       builder.addCase(
        sendMessage.fulfilled, (state, { payload }) => {
             state.message = payload;
             state.loading = "loaded";
       });
       builder.addCase(
        sendMessage.rejected,(state, action) => {
             state.loading = "error";
             state.error = action.error.message;
       });
    }
  })
  
  interface stateI{
  message: messageI;
}
interface messageI{
  loading: string;
}

  export const selectMessage = createSelector(
    (state: stateI) => ({
       message: state.message,
       loading: state.message.loading,
    }), (state) =>  state
  );

MessageController.tsx

  import {useAppDispatch} from '../../state/store';

  const dispatch = useAppDispatch();

  const { message } = useSelector(selectMessage);
    React.useEffect(() => {
     console.log(message)
     // TODO display the result of the api call in the page..
  }, [message]); 
  
  const handleClick =()=>{
    const data = {
      "environment": dropboxValue,
      "payload": textareaValue
    };

    dispatch(sendMessage(data))
    .then(() => {
      // TODO display the result of the api call in the page..
    })

  }
  
   //additional ui code for a button which when clicked trigger the api call (sendMessage)

store.ts

export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();
//other code not relevant (I think)

Answer 1

案例1：你创建useAppDispatch错了。更新可以这样：

export const useAppDispatch = useDispatch<AppDispatch>();

案例 2：您创建了错误的 thunk 操作。你可以这样更新：

export const sendMessage = createAsyncThunk(
    `message/sendMessage`,
    async (data, thunkAPI) => {
    ...