Next.js:使用TypeScript的next-redux-wrapper在getServerSideProps中调用Thunks？

npm install react-redux next-redux-wrapper redux-thunk

// store.ts
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

export default store;

// reducers.ts
import { combineReducers } from 'redux';

// 定义你的reducer

const rootReducer = combineReducers({
  // 将你的reducer放在这里
});

export default rootReducer;

// pages/index.tsx
import { GetServerSideProps } from 'next';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from '../redux/actions';

const HomePage = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);

  // 在组件挂载时获取数据
  useEffect(() => {
    dispatch(fetchData());
  }, []);

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  // 在服务器端获取数据
  await store.dispatch(fetchData());

  return {
    props: {},
  };
};

export default HomePage;