Reactjs React/TypeScript/Redux/Thunk操作未被调度，状态未更新

我试图使用React-Redux&TypeScript向API发出GET请求，方法是尝试在我单击按钮（onClick事件）时发送一个发出请求的操作，然后我想使用reducer更新状态，然后使用console.log更新状态，但是，我似乎只能在控制台中显示存储区中的初始化状态，我不太确定出了什么问题，但似乎我的操作甚至没有被分派到我的reducer（我的操作中的my console.log没有被触发，它也没有出现在我的reducer switch语句中），以下是逻辑错误所在的文件：

编辑：操作被触发，我在下面写的console.log//EDIT出现在控制台中，但由于某些原因，它没有发送到我的reducer

src/actions/movieActions.ts：

import { ActionCreator, Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';
import { IMovieState } from '../reducers/movieReducer';
import axios from 'axios';

export enum MovieActionTypes {
    ANY = 'ANY',
    GENRE = 'GENRE',
}

export interface IMovieGenreAction {
    type: MovieActionTypes.GENRE;
    property: Array<String>;
}

export type MovieActions = IMovieGenreAction;

/*<Promise<Return Type>, State Interface, Type of Param, Type of Action> */
export const movieAction: ActionCreator<ThunkAction<Promise<any>, IMovieState, any, IMovieGenreAction>> = () => {
  //EDIT
  console.log('movieAction Triggered')
  return async (dispatch: Dispatch) => {
    try {
      dispatch({
        type: MovieActionTypes.GENRE
      })
      console.log('moveActions called')
      const res = await axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=${process.env.REACT_APP_MOVIE_API_KEY}&language=en-US`)
      dispatch({
        property: res,
        type: MovieActionTypes.GENRE
    })
  } catch (err) {
    console.log(err);
  }
} 
};

从'redux'导入{ActionCreator，Dispatch}；
从'redux thunk'导入{ThunkAction}；
从“../reducers/movieReducer”导入{IMovieState}；
从“axios”导入axios；
导出枚举电影动作类型{
ANY='ANY'，
流派=‘流派’，
}
导出接口IMovieGenreAction{
类型：MovieActionTypes.GENRE；
属性：数组；
}
导出类型MovieActions=IMovieGenreAction；
/* */
导出const movieAction:ActionCreator=（）=>{
//编辑
console.log（'movieAction-tricked'）
返回异步（分派：分派）=>{
试一试{
派遣({
类型：MovieActionTypes.GENRE
})
log（'moveActions已调用'）
const res=等待axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=${process.env.REACT\u APP\u MOVIE\u API\u KEY}&language=en-US`）
派遣({
财产：res，
类型：MovieActionTypes.GENRE
})
}捕捉（错误）{
控制台日志（err）；
}
} 
};

src/reducers/movieReducer.ts：

import { Reducer } from 'redux';
import { MovieActionTypes, MovieActions } from '../actions/movieActions';

export interface IMovieState {
    property: any;
    genres: any;
}

const initialMovieState: IMovieState = {
    property: null,
    genres: 'askksakd'
};

export const movieReducer: Reducer<IMovieState, MovieActions> = (
    state = initialMovieState,
    action
    ) => {
      switch (action.type) {
        case MovieActionTypes.GENRE: {
          console.log('MOVE ACTION CALLED')
          return {
            ...state,
            genres: action.property
          };
        }
        default:
          console.log('default action called')
          return state;
      }
  };

从'redux'导入{Reducer}；
从“../actions/MovieActions”导入{MovieActionType，MovieActions}；
输出接口状态{
财产：任何；
类型：任何；
}
常量initialMovieState:IMovieState={
属性：null，
体裁：“askksakd”
};
导出常数移动器：减速器=(
状态=初始运动状态，
行动
) => {
开关（动作类型）{
案例电影ActionTypes.GENRE：{
console.log（'调用移动操作'）
返回{
……国家，
类型：action.property
};
}
违约：
log（'调用默认操作'）
返回状态；
}
};

src/store/store.ts：

import { applyMiddleware, combineReducers, createStore, Store } from 'redux';
import thunk from 'redux-thunk';
import { IMovieState, movieReducer } from '../reducers/movieReducer';

// Create an interface for the application state
export interface IAppState {
  movieState: IMovieState
}

// Create the root reducer
const rootReducer = combineReducers<IAppState>({
  movieState: movieReducer
});

// Create a configure store function of type `IAppState`
export default function configureStore(): Store<IAppState, any> {
  const store = createStore(rootReducer, undefined, applyMiddleware(thunk));
  return store;
}

从'redux'导入{applyMiddleware，combinereducer，createStore，Store}；
从“redux thunk”导入thunk；
从“../reducers/movieReducer”导入{IMovieState，movieReducer}；
//为应用程序状态创建接口
导出接口IAppState{
电影州：伊莫维州
}
//创建根减速器
const rootReducer=combinereducer({
电影状态：电影制作人
});
//创建“IAppState”类型的配置存储函数`
导出默认函数configureStore（）：Store{
const store=createStore（rootReducer，未定义，applyMiddleware（thunk））；
退货店；
}

src/components/MovieForm.tsx（应该分派操作的文件）：

import React，{useState}来自“React”；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Box”导入框；
从“@material ui/core/Select”导入Select；
从“@material ui/core/MenuItem”导入菜单项；
从'@material ui/system'导入{space}；
从“@material ui/core/Card”导入卡片；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“@material ui/core”导入{CardHeader，TextField，CircularProgress}；
从'react redux'导入{useDispatch，useSelector}；
从“../actions/movieActions”导入{movieAction}；
从“../store/store”导入{IAppState}；
从“axios”导入axios；
const MovieForm=（）=>{
const dispatch=usedpatch（）
const getGenres=（）=>{
console.log（'actions dispatched'）
派遣（电影行动）
}
const-genres=useSelector（（state:IAppState）=>state.movieState.genres）；
//const[genreChoice，setGenreChoice]=useState（“”）
返回(
影评人
你好，世界。
console.log（类型）}>
喵




{
getGenres（）
setTimeout（函数（）{
console.log（类型）
}, 5000)
}}>流派列表
console.log（axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.REACT\u APP\u MOVIE\u API\u KEY}&language=en-US&sort\u-by=popularity.desc&include\u-成人=false&include\u-video=false&with\u-genres=35&page=1`）}>单击我
)
}
导出默认电影表单

这里是src/index.tsx，以防问题在这里，我不知道：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';
import App from './App';
import configureStore from './store/store';

const store = configureStore();

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
        <Router>
          <App />
        </Router>
      </ThemeProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}
从“react Router dom”导入{BrowserRouter as Router}；
导入“./index.css”；
从“@material ui/core/CssBaseline”导入CssBaseline；
从'@material ui/core/styles'导入{ThemeProvider}；
从“/theme”导入主题；
从“./App”导入应用程序；
从“./store/store”导入配置存储；
const store=configureStore（）；
ReactDOM.render(
{/*CssBaseline启动了一个优雅、一致且简单的基线来构建。*/}
,
document.getElementById（'root'））
);

---

谢谢你看了这一点，并试图帮助我看到什么我不能

Do

dispatch（movieAction（））

因为movieAction是一个创建动作的函数，所以您需要调用它并分派结果动作。

这就成功了，感谢您的发现

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';
import App from './App';
import configureStore from './store/store';

const store = configureStore();

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
      {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
        <Router>
          <App />
        </Router>
      </ThemeProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);