Typescript、React 和 Redux axios 错误 - 操作必须是普通对象。 使用自定义中间件进行异步操作

Question

Need some Help With Typescript, React and Redux.

export function fetchAllMeals (subject: string){
  axios 
  .get(`https://www.themealdb.com/api/json/v1/1/search.php?s=${subject}`)
  .then((response: any) => {
    console.log(response.data)
    return { type: FETCH_ALL_MEALS, data: response.data };
    }
  )
  .catch(err => console.log(err));
}; 

I keep getting this error is actions must be plain objects. use custom middleware for async actions actions must be plain objects. use custom middleware for async actions

Or when I do:

export function fetchAllMeals (subject: string): MealActionTypes {
  axios 
  .get(`https://www.themealdb.com/api/json/v1/1/search.php?s=${subject}`)
  .then((response: any) => {
    console.log(response.data)
    return { type: FETCH_ALL_MEALS, data: response.data };
    }
  )
  .catch(err => console.log(err));
}; 

Or this error is A function whose declared type is neither 'void' nor 'any' must return a value. - I have changed : MealActionTypes in top line

Answer 1

In redux, all the actions should be synchronous. However in your case you are doing an http call with axios and so it is an asynchronous operation.

The error message that you get actions must be plain objects. use custom middleware for async actions actions must be plain objects. use custom middleware for async actions is then correct.

So if you want to do async actions, you need to use a async middleware. The easiest one is thunk