React-Redux在HTTP响应后dispatch action报错的解决方法咨询

核心问题解答 #

完全可以在HTTP响应函数中dispatch Redux Action，你遇到的编译错误是因为违反了React Hooks的使用规则：useDispatch是React Hook，只能在React函数组件的顶层，或名称以use开头的自定义Hook中调用，而你的requestWithAction是普通工具函数，不符合调用条件。

具体解决方案 #

方案1：直接使用全局store实例dispatch

你已经导入了全局store，直接调用store.dispatch即可，无需使用useDispatch：

import axios from 'axios';
import store from "../store";
import { getArticle } from "../action/ArticleAction";

export function requestWithAction(config, action) {
  return axios(config).then(
    response => {
      const data = response.data.result;
      store.dispatch({ type: 'SUBMIT_DECISION' , payload: 1});
      store.dispatch(action(data));
    }
  ).catch(
    error => {
      console.error(error);
    }
  );
}

适用场景：单页应用（SPA）的非React环境（如工具函数、独立回调），但服务端渲染（SSR）场景需谨慎使用，因为全局store可能不是唯一实例。

方案2：将dispatch作为参数传入函数

避免依赖全局store，让调用方（React组件或Hook）传入dispatch，提升函数灵活性：

import axios from 'axios';
import { getArticle } from "../action/ArticleAction";

export function requestWithAction(config, action, dispatch) {
  return axios(config).then(
    response => {
      const data = response.data.result;
      dispatch({ type: 'SUBMIT_DECISION' , payload: 1});
      dispatch(action(data));
    }
  ).catch(
    error => {
      console.error(error);
    }
  );
}

在React组件中调用示例：

import { useDispatch } from 'react-redux';
import { requestWithAction } from './path/to/XHRClient';
import { getArticle } from '../action/ArticleAction';

function MyComponent() {
  const dispatch = useDispatch();

  const fetchData = () => {
    requestWithAction(
      { url: '/api/articles' },
      getArticle,
      dispatch
    );
  };

  return <button onClick={fetchData}>获取文章</button>;
}

方案3：封装为自定义Hook

如果该函数仅在React组件/Hook中使用，可将其改为自定义Hook（名称以use开头），合法使用useDispatch：

import axios from 'axios';
import { useDispatch } from 'react-redux';
import { getArticle } from "../action/ArticleAction";

export function useRequestWithAction() {
  const dispatch = useDispatch();

  return (config, action) => {
    return axios(config).then(
      response => {
        const data = response.data.result;
        dispatch({ type: 'SUBMIT_DECISION' , payload: 1});
        dispatch(action(data));
      }
    ).catch(
      error => {
        console.error(error);
      }
    );
  };
}

在React组件中调用示例：

import { useRequestWithAction } from './path/to/XHRClient';
import { getArticle } from '../action/ArticleAction';

function MyComponent() {
  const requestWithAction = useRequestWithAction();

  const fetchData = () => {
    requestWithAction(
      { url: '/api/articles' },
      getArticle
    );
  };

  return <button onClick={fetchData}>获取文章</button>;
}

方案选择建议 #

• 若需在非React环境调用：选方案1
• 若需解耦全局store、提升复用性：选方案2
• 若仅在React组件中使用：选方案3

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