Redux saga多次调用(2或3次) Nextjs

npm install redux-saga

import { put, takeEvery } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from './actions';

function* fetchData() {
  try {
    // 发起异步请求获取数据
    const response = yield fetch('https://api.example.com/data');
    const data = yield response.json();
    
    // 请求成功时，触发成功的action
    yield put(fetchDataSuccess(data));
  } catch (error) {
    // 请求失败时，触发失败的action
    yield put(fetchDataFailure(error));
  }
}

// 监听触发异步请求的action
function* watchFetchData() {
  yield takeEvery('FETCH_DATA', fetchData);
}

export default function* rootSaga() {
  yield all([
    watchFetchData(),
    // 在这里添加其他的Saga监听器
  ]);
}

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

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

sagaMiddleware.run(rootSaga);

export default store;

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

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

  useEffect(() => {
    // 在组件加载时触发异步请求的action
    dispatch(fetchData());
  }, []);

  return (
    // 组件的渲染内容
  );
};

export default MyComponent;