javascript - Next.JS Redux 调度在 getStaticProps() 中不起作用

Question

我对 Next.JS 很陌生，我试图用我的 Next.JS 应用程序设置 Redux。现在我的页面应该显示我从 API 调用的帖子列表。当我从 useEffect() 调度时，页面呈现完美将数据填充到我的页面上，但是 getStaticProps()或 getServerSideProps()不工作!
这是一些代码，可以让您了解我到目前为止所做的工作:
store.js

import { useMemo } from 'react'
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import rootReducer from './reducers/rootReducer'

const initialState = {}
const middlewares = [thunk]

let store

function initStore(preloadedState = initialState) {
    return createStore(
        rootReducer,
        preloadedState,
        composeWithDevTools(applyMiddleware(...middlewares))
    )
}

export const initializeStore = (preloadedState) => {
    let _store = store ?? initStore(preloadedState)

    if (preloadedState && store) {
        _store = initStore({
            ...store.getState(),
            ...preloadedState,
        })
        store = undefined
    }

    if (typeof window === 'undefined') return _store
    if (!store) store = _store

    return _store
}

export function useStore(initialState) {
    const store = useMemo(() => initializeStore(initialState), [initialState])
    return store
}

action.js

export const fetchPosts = () => async dispatch => {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')

    dispatch({
        type: FETCH_POSTS,
        payload: res.data
    })
}

_app.js

import { Provider } from 'react-redux'
import { createWrapper } from 'next-redux-wrapper'
import { useStore } from '../redux/store'

export default function MyApp({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)

  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

这些是我进行基本 redux 设置所需的文件。一旦我的商店建立起来，我就把我的应用程序包裹在 Provider 周围。 ，我最初虽然使用 useEffect() Hook 以填充在我的 index.js 中呈现的组件上的数据文件。
组件.js

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchPosts } from '../redux/actions/postsAction'

const Posts = () => {
    const dispatch = useDispatch()
    const { items } = useSelector(state => state.posts)

    useEffect(() => {
        dispatch(fetchPosts())
    }, [])

    return (
        <div className="">
            <h1>Posts</h1>

            {items.map(post => {
                return (<div key={post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.body}</p>
                </div>)
            })}
        </div>
    )
}

export default Posts

这工作得很好!我所有的帖子都显示在组件内。当我试图通过服务器端渲染(甚至 SSG)实现相同的行为时，出现了问题。我想在预渲染阶段填充数据，但由于某种原因，应该保存所有数据的 items 数组是空的，基本上意味着从未调用过调度程序!这是困扰我的一段代码(与之前的代码完全相同，但这次我使用的是 getStaticProps() 而不是 useEffect() ):
组件.js

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchPosts } from '../redux/actions/postsAction'

const Posts = ({ items }) => {
    return (
        <div className="">
            <h1>Posts</h1>

            {items.map(post => {
                return (<div key={post.id}>
                    <h3>{post.title}</h3>
                    <p>{post.body}</p>
                </div>)
            })}
        </div>
    )
}

export async function getStaticProps() {
    console.log('Props called')
    const dispatch = useDispatch()
    const { items } = useSelector(state => state.posts)

    dispatch(fetchPosts())
    console.log(items)

    return { props: { items } }
}

export default Posts

通过运行这个，我收到一个错误，项目是空的!请帮助我，我不知道这里出了什么问题。

Answer 1

好吧，我自己解决了这个问题，但我忘了发布答案，我的错!
这里的问题真的很简单，钩子(Hook)在功能组件之外不起作用!