无法同时使用 saga-toolkit 和 redux-toolkit 来调度操作

Question

我尝试使用 saga-toolkit 包来创建 saga 操作，但在调度时出现一些错误，尽管我查阅了 saga-toolkit npm 包的官方文档，但我认为那里缺少一些东西，我无法弄清楚发生了什么错误的。这是官方文档链接 https://npm.io/package/saga-toolkit

我想要在分派操作时传递一些参数，但在控制台中出现错误，例如 “操作必须是普通对象。使用自定义中间件进行异步操作。”

saga-toolkit 提供 createSagaAction ，它负责创建 saga 操作，但在调度

dataSlice.js

import { createSlice } from "@reduxjs/toolkit";
import { createSagaAction } from "saga-toolkit";

export const fetchData = createSagaAction("data/fetchData");

const dataSlice = createSlice({
  name: "data",
  initialState: {
    data: [],
    error: null,
    loading: false,
  },


  extraReducers: {
    [fetchData.pending]: (state) => {
      state.loading = true;
    },
    [fetchData.fulfilled]: (state, action) => {
      state.loading = false;
      state.data = action.payload;
    },
    [fetchData.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    },
  },
});

export default dataSlice.reducer;

dataSagas.js

import { put, call, fork } from "redux-saga/effects";
import { takeLatestAsync, putAsync } from "saga-toolkit";
import * as actions from "./feature/dataSlice";
import { getDataApi } from "./api";

function* onLoadData({payload}) {
    
  const result = yield call(getDataApi, payload);
  return result;
}

function* onLoadData() {
  yield takeLatestAsync(actions.fetchData.type, onLoadDataAsync);
}

export const dataSagas = [fork(onLoadData)];

rootSaga.js

import { all } from "redux-saga/effects";
import { dataSagas } from "./dataSagas";

export default function* rootSaga() {
  yield all([...dataSagas]);
}

store.js

import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import DataReducer from "./feature/dataSlice";
import rootSaga from "./rootSaga";

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: {
    data: DataReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ thunk: false }).concat(sagaMiddleware),
});

sagaMiddleware.run(rootSaga);

export default store;

App.js期间我仍然得到上述内容

import { useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import { useDispatch } from "react-redux";
import { fetchData } from "./redux/feature/dataSlice";

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

  useEffect(() => {
    dispatch(fetchData());
  }, []);

  return (
    <div className="App">
       <h2>Calling API using Saga-toolkit</h2>
    </div>
  );
}

export default App;