如何使redux-saga值显示在屏幕上[NextJS Redux-Saga]

// 1. 创建Redux store
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { Provider } from 'react-redux';
import { all } from 'redux-saga/effects';

// 导入reducers和sagas
import rootReducer from './reducers';
import { fetchDataSaga } from './sagas';

// 创建saga中间件
const sagaMiddleware = createSagaMiddleware();

// 创建Redux store
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

// 运行所有的sagas
function* rootSaga() {
  yield all([fetchDataSaga()]);
}

sagaMiddleware.run(rootSaga);

// 2. 在页面组件中连接Redux store
import { connect } from 'react-redux';

const MyComponent = ({ data }) => {
  return (
    <div>
      <h1>Data: {data}</h1>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    data: state.data,
  };
};

export default connect(mapStateToProps)(MyComponent);

// 3. 在组件中启动和取消saga
import { useEffect } from 'react';
import { fetchData } from './actions';

const MyComponent = ({ dispatch }) => {
  useEffect(() => {
    // 启动saga
    dispatch(fetchData());

    return () => {
      // 取消saga
      // 可选操作，根据需要决定是否取消saga
    };
  }, []);

  return (
    <div>
      {/* 显示数据 */}
    </div>
  );
};

// 4. 在saga中监听Redux action并执行异步逻辑
import { takeEvery, put } from 'redux-saga/effects';
import { setData } from './actions';

function* fetchDataSaga() {
  yield takeEvery('FETCH_DATA', function* () {
    try {
      // 执行异步逻辑，比如发送网络请求获取数据
      const response = yield fetch('https://api.example.com/data');
      const data = yield response.json();

      // 将获取到的值存储到Redux store中
      yield put(setData(data));
    } catch (error) {
      // 处理错误
    }
  });
}

// 5. 在actions中定义Redux action和action creators
export const fetchData = () => ({
  type: 'FETCH_DATA',
});

export const setData = (data) => ({
  type: 'SET_DATA',
  payload: data,
});

// 6. 在reducers中处理状态更新
const initialState = {
  data: null,
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_DATA':
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
};

export default rootReducer;