如何从不被任何地方导入且无返回内容的文件向Redux Store派发动作？

我完全理解你的困扰——把axios请求放在一个只返回空div的组件里，还要靠渲染它才能触发逻辑，确实感觉很不优雅。问题的核心在于：你当前的请求逻辑是绑定在React组件的生命周期（useEffect）上的，只有组件被渲染时，这段逻辑才会执行。如果不想渲染这个组件，我们需要把请求逻辑从组件中抽离出来，变成可以独立调用的函数。

方案1：抽离独立的Action Creator函数 #

我们可以把请求逻辑封装成一个能接收dispatch参数的独立函数，这样就不需要依赖React组件了。

步骤1：创建独立的请求逻辑文件 #

新建一个比如apiActions.js的文件，把请求逻辑移过去：

import axios from "axios";

// 封装请求逻辑，接收dispatch作为参数
export const fetchCommits = async (dispatch) => {
  try {
    const response = await axios.get(`你的请求URL`);
    // 注意：response.data是同步获取的，不需要await
    dispatch({ 
      type: "GET_REQUEST", 
      payload: { commitsData: response.data } 
    });
  } catch (err) {
    console.error("请求失败:", err);
  }
};

步骤2：在合适的时机调用这个函数 #

比如在应用初始化时（比如App组件的useEffect里），直接调用这个函数并传入dispatch：

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { fetchCommits } from "./apiActions";

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

  // 应用加载时触发请求
  useEffect(() => {
    fetchCommits(dispatch);
  }, [dispatch]); // 把dispatch加入依赖数组，确保引用稳定

  return (
    <div className="App">
      {/* 你的应用内容 */}
    </div>
  );
}

export default App;

这样就完全不需要那个空的GetRequest组件了，请求逻辑会在App加载时自动触发，Store也能接收到action并更新状态。

方案2：使用Redux Toolkit（官方推荐） #

如果你愿意迁移到Redux官方推荐的Redux Toolkit（RTK），处理异步逻辑会更简洁规范，RTK的createAsyncThunk专门用来处理这类异步请求。

步骤1：创建Slice并定义异步Thunk #

新建commitsSlice.js：

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

// 创建异步Thunk，自动处理pending/fulfilled/rejected状态
export const fetchCommits = createAsyncThunk(
  "commits/fetchCommits", // 唯一标识这个Thunk的类型前缀
  async () => {
    const response = await axios.get(`你的请求URL`);
    return response.data; // 返回的数据会作为action的payload
  }
);

const commitsSlice = createSlice({
  name: "commits",
  initialState: {
    data: [],
    status: "idle", // idle/loading/succeeded/failed
    error: null
  },
  reducers: {},
  // 处理异步Thunk的三种状态
  extraReducers: (builder) => {
    builder
      .addCase(fetchCommits.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchCommits.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.data = action.payload;
      })
      .addCase(fetchCommits.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.error.message;
      });
  }
});

export default commitsSlice.reducer;

步骤2：在Store中注册这个Slice #

修改你的store配置文件（比如store.js）：

import { configureStore } from "@reduxjs/toolkit";
import commitsReducer from "./commitsSlice";

export const store = configureStore({
  reducer: {
    commits: commitsReducer
  }
});

步骤3：触发异步请求 #

在App组件或者其他需要的地方，直接dispatch这个Thunk：

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { fetchCommits } from "./commitsSlice";

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

  useEffect(() => {
    dispatch(fetchCommits()); // 直接dispatch这个异步Thunk
  }, [dispatch]);

  return (
    <div className="App">
      {/* 你的应用内容 */}
    </div>
  );
}

export default App;

RTK的方案不仅省去了手动处理try/catch，还自动管理了请求的加载、成功、失败状态，让状态逻辑更清晰。

为什么之前的方案行不通？ #

你的GetRequest组件是一个React组件，只有当它被React渲染到DOM树中时，它内部的useEffect才会执行，进而触发请求和dispatch。如果不渲染这个组件，里面的代码根本不会被执行，所以Store自然感知不到任何action。

核心思路就是：把异步请求逻辑从React组件的生命周期中解放出来，变成可以独立调用的函数，在合适的时机（比如应用初始化、路由切换、用户操作时）通过dispatch触发。

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