如何在 Redux 工具包中设置打字稿？

Question

我想在调度时从 redux 工具包的 createAsyncThunk 接收数据。

但是不知道怎么设置数据类型

如果未指定数据类型，则显示一条带有红线的警告线。

喜欢这个截图

如何指定类型？

这是我的代码

    // commentinput is string and post.id is number

    const commetsubmitfun = useCallback(() => {
      dispatch(addComment({content: commentinput, postId: post.id}));
    }, [dispatch, commentinput]);




    export const addComment = createAsyncThunk(
      'post/addComment',
      async (data, {rejectWithValue}) => {
        try {
          //    data: {content: "aaa", postId: 66}
          const response = await axios.post(`/post/${data.postId}/comment`, data); // POST /post/1/comment
          return response.data;
        } catch (error: any) {
          return rejectWithValue(error.response.data);
        }
      },
    );

Answer 1

您在 createSlice 文件中使用接口或类型指定类型

例如：

interface Action {
    type: string
    payload: {
       img: string
       images: string[] | [] | null
    }
}

type永远是string，payload就是你放在{}里面的东西dispatch(addComment({content: ...payload, postId: ..payload}));

interface Action {
    type: string
    payload: {
       content: string
       postId: number //or if its possibly undefined/null postId?: number | null | undefined
    }
}

const initialStateValue = {
   post: null
}

reducers: {
    addComment: (state: any = initialStateValue,  action: Action) => {
        state.post = action.payload;
    },

Answer 2

你应该在调用 createAsyncThunk 时声明类型，为 data 声明一个接口像这样：

type DataType = { 
   content : string
   postId : string
}

然后在此处添加：

      async (data : DataType, {rejectWithValue}) => {

您可以在此处阅读更多内容：https://redux-toolkit.js.org/usage/usage-with-typescript#createasyncthunk

如何在 Redux 工具包中设置打字稿？

How do I set up typescript in Redux toolkit?

javascript

typescript

reactjs

react-native