我非常新的 typescript ，我试图使用Redux与它，我完全失去了，似乎不能理解Redux文件。
我尝试获取数据并将它们分派到Reducer中，以便以后能够像使用Typescript之前那样使用它们，但现在我的方法不是这样工作的：

import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import axios from 'axios';
import { useAppDispatch } from './hooks';

export interface MealState {
  meal:string[],
  input: string,
  favorites: string[],
  categories: string[],
}

const initialState: MealState = {
  meal:[],
  input: '',
  favorites: [],
  categories: [],
};

const mealReducer = createSlice({
  name: 'meal',
  initialState,
  reducers: {

     // GET ALL MEAL
     getAllMeal: (state, action: PayloadAction<string[]>) => {
      console.log('Do something') //<== trying to at least do this
      state.meal = action.payload;
    },

     // ADD INPUT
     addInput: (state, action: PayloadAction<string>)=> {
      state.input = action.payload
    }, 
  }
});

// ----------------------------------------------------------------------

export default mealReducer.reducer

// Actions
export const {
  addInput,
} = mealReducer.actions;


export const getMeal = createAsyncThunk(
  'meal/getMeal',
  async (search: string) => {
    const response: string[] = await axios.get(`https://www.themealdb.com/api/json/v1/1/search.php?s=${search}`);    
    console.log(response);
    const dispatch = useAppDispatch();
    dispatch(mealReducer.actions.getAllMeal(response));    
  }
);

下面是我的代码来触发它（我确实得到了API响应，只是不能分派它）

import { useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from '../redux/hooks';
import { getMeal, addInput } from '../redux/meal';
import { RootState } from '../redux/store';
import {getCategories} from '../api/api'

const Header = () => {

  const dispatch = useAppDispatch();

  const input = useAppSelector((state: RootState) => state.meal.input)

  const [inputText, setInputText] = useState(input);

  const inputHandler = (e: { target: { value: string; }; }) => {
    setInputText(e.target.value.toLowerCase());
  };

  useEffect(() => {
    dispatch(getMeal(inputText));
    dispatch(addInput(inputText))
  }, [dispatch, inputText]);

  return (
    <Box sx={{ m: 3 }}>
        <TextField
          onChange={inputHandler}
          placeholder="Search"
          sx={{ mb: 3 }}
        />
    </Box>
  );
}

export default Header