redux toolkit createAsyncThunk typescript errors

Question

I'm trying to call an API endpoint using @reduxjs/toolkit and typescript.

I've followed the example here, without success https://redux-toolkit.js.org/api/createAsyncThunk

I'm stuck on some typescript errors, what am I doing wrong?

1°error: when I do the dispatch like that in MessageController.tsx , typescript says: Argument of type 'AsyncThunk<any, void, {}>' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'AsyncThunk<any, void, {}>' but required in type 'AnyAction'.ts(2345) index.d.ts(19, 3): 'type' is declared here.

2° error: in message.slice.ts everytime I do a message.fulfilled or rejected or pending I get this: Property 'fulfilled' does not exist on type '(data: any) => AsyncThunk<any, void, {}>'.ts(2339)

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)

Viet · Accepted Answer · 2021-09-02 15:23:32Z

4

Case 1: You createuseAppDispatch wrong. Update can like this:

export const useAppDispatch = useDispatch<AppDispatch>();

Case 2: You create thunk action wrong. You can update like this:

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

answered Sep 2, 2021 at 15:23

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2298581 Over a year ago

thanks, I dont have the second error anymore but the first error on the dispatch call changed in 2 others error : 1) This expression is not callable. Type 'AnyAction' has no call signatures.ts(2349) 2)Expected 0 arguments, but got 1.ts(2554)

user2298581 Over a year ago

the 2) actually make sense to me..I need to pass data to sendMessage() but you suggest to write the signature without the data argument

Linda Paiste Over a year ago

You are right about #2 but wrong about #1. They had it correct. They are creating a new hook so it needs to be a function.

MrSrv7 Over a year ago

Please mark the answer as accepted if it solved your question. Thanks

Collectives™ on Stack Overflow

redux toolkit createAsyncThunk typescript errors

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related