如何将使用dispatch的action creator传入store.dispatch并正常执行

你触发action creator的写法存在错误，同时还存在中间件配置、组件逻辑层级的潜在问题，具体如下：

• 你调用store.dispatch(loadUser)时，直接把loadUser函数本身传给了dispatch，没有执行它。loadUser是返回thunk函数的action creator，必须先执行拿到返回的thunk函数，才能被redux-thunk中间件识别、执行内部逻辑，这就是about to call api没有输出的直接原因。
• 你把dispatch逻辑写在App组件内部，但App本身是Provider的父级，如果你不是全局单独导入store实例，App组件内部根本拿不到store上下文。
• 如果没有正确配置redux-thunk中间件，thunk类型的action creator也无法正常执行。

第一步：修正dispatch调用写法 #

把App.js中useEffect里的调用改成执行loadUser：

useEffect(() => {
  console.log('loading user');
  store.dispatch(loadUser()); // 加括号执行action creator，拿到返回的thunk函数
}, []);

第二步：确认redux-thunk中间件已正确配置 #

创建store时必须注册redux-thunk中间件才能支持这类返回函数的action creator，配置参考：

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

const rootReducer = combineReducers({
  auth: authReducer
  // 其他自定义reducer
});

const store = createStore(
  rootReducer,
  applyMiddleware(thunk) // 必须注册thunk中间件
);

第三步（可选优化）：调整逻辑层级更符合React-Redux规范 #

你当前把Provider放在App组件内部，App组件本身不受Provider管控，更规范的写法是把Provider移到入口文件包裹App组件，用useDispatch hook触发action：

1. 修改index.js入口文件

import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

2. 调整App.js逻辑

import { useDispatch } from 'react-redux';
import { loadUser } from './actions/authActions';

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    console.log('loading user');
    dispatch(loadUser());
  }, [dispatch]);
 return (
  <div className="App">
    <AppNavbar />
    <ShoppingList />
  </div>
 );
}

export default App;

内容的提问来源于stack exchange，提问作者Nabin Kaucha