React-Redux调用Action函数后return语句内逻辑未执行问题求助

核心成因 #

该问题是Redux Thunk场景下的典型配置错误，主要有两个可能的原因：

1. mapDispatchToProps 写法不符合Redux规范 #

你当前定义的mapDispatchToProps是无参数函数，直接返回了原始的action creator，connect方法无法自动将返回的thunk函数交给dispatch执行，导致login执行后返回的异步函数只被创建、没有被调用，自然不会执行内部逻辑。

2. Redux Thunk中间件未正确注册到Store #

如果创建Redux Store时没有将Thunk中间件传入applyMiddleware，Redux默认只能处理普通对象类型的action，遇到函数类型的返回值会直接忽略，不会执行内部逻辑。

修复方案 #

修复mapDispatchToProps配置 #

有两种合规的写法可选：

方案A：使用对象形式的mapDispatchToProps（推荐）

connect会自动为对象内的每个action creator包裹dispatch逻辑，无需手动处理：

// 把原来的函数写法替换成对象写法
const mapDispatchToProps = {
  login: authentications.login,
  logout: authentications.logout,
}

方案B：补全函数形式的参数与dispatch调用

如果需要自定义封装逻辑，可保留函数写法，补全dispatch参数与调用逻辑：

function mapDispatchToProps(dispatch: any) {
  return {
    login: (username: string, password: string) => dispatch(authentications.login(username, password)),
    logout: () => dispatch(authentications.logout()),
  }
}

检查Thunk中间件注册逻辑 #

确保创建Store的代码中已经正确引入并注册Thunk中间件，参考示例：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './redux/reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

内容的提问来源于stack exchange，提问作者Xuanyuan Zhang