store.getState() 在 index.js 中返回空值

Question

使用 nextjs 进行服务器端渲染，试图从 getServerSideProps() 中的 redux 存储中获取状态。但得到空值。

使用const productList = useSelector(state => state.productList) const { loading, error, products } = productList 从组件内部客户端的redux 获取数据工作正常。但是当使用 getServersideProps() 时，我得到了 emtpy 结果。

index.js：

import store from '../redux/store'

export default function Home({products, error, loading}) {

  const dispatch = useDispatch()

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

  return (
    <>
      <Header />
      <Products loading={loading} error={error} products={products} />
      <Footer />
    </>
  )
}

export async function getServerSideProps() {
  const state = store.getState()
  const { loading, error, products } = state.productList

  return {props: {products: products, loading: loading, error: error}}
}

*注意：即使我在组件内部做了console.log(store.getState())，它仍然返回空数组

减速器：

export const productListReducer = (state = { products: [] }, action) => {
    switch (action.type) {
        case 'PRODUCT_LIST_REQUEST':
            return { loading: true, products: [] }
        case 'PRODUCT_LIST_SUCCESS':
            return { loading: false, products: action.payload }
        case 'PRODUCT_LIST_FAIL':
            return { loading: false, error: action.payload }
        default:
            return state
    }
}

行动：

import axios from 'axios'

export const listProducts = () => async (dispatch) => {
    try {
        dispatch({ type: 'PRODUCT_LIST_REQUEST' })

        const { data } = await axios.get('/api/products')

        dispatch({
            type: 'PRODUCT_LIST_SUCCESS',
            payload: data
        })
    } catch (error) {
        dispatch({
            type: 'PRODUCT_LIST_FAIL',
            payload: error.response && error.response.data.message
                ? error.response.data.message : error.message
        })
    }
}

store.js：

const reducer = combineReducers({
    productList: productListReducer,
    categoryList: categoryListReducer,
})

const initialState = {}

const middleware = [thunk]

const store = createStore(
    reducer, initialState, composeWithDevTools(applyMiddleware(...middleware))
)

export default store

Answer 1

尝试直接调用 getState() 并且不要忘记将其作为参数传递，并确保您已将商店传递给您的应用组件

export async function getServerSideProps(getState) {
  const state = getState()
  const { loading, error, products } = state.productList

  return {props: {products: products, loading: loading, error: error}}
}

Answer 2

问题是 useDispatch 是 React-Redux function，但 store 尚未连接到 React 组件。

用useDispatch 代替store.dispatch：

import store from '../redux/store'

export default function Home({products, error, loading}) {

  useEffect(() => {
    store.dispatch(listProducts())
  })

  return (
    <>
      ...
    </>
  )
}

注意，传递给useEffect 的数组控制该效果何时运行，因此传入调度函数没有意义。详情请见this post。

您还可以使用 React-Redux 将 Redux 存储连接到 React 组件并继续使用 useDispatch。