当客户端路由到页面时，Redux Store未定义

如何解决当客户端路由到页面时，Redux Store未定义

我有一个最小的测试应用程序，其中有两个页面（index.js和about.js）。 index.js具有getServerSideProps方法，该方法调用API，水合Redux存储（在store.js文件中），然后返回页面。 about.js有一个指向主页（index.js）的链接。

当我直接请求主页时，它就可以工作。

当我：首先进入/about页面，然后通过下一个Link元素进入主页（/）时，它将失败。

error

index.js页面：

import Head from 'next/head'
import Users from '../components/Users'
import { wrapper } from '../redux/store'

import axios from 'axios'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Users />
    </div>
  )
}

export const getServerSideProps = wrapper.getServerSideProps(
   async({ store }) => {
    console.log("getting data ")
    
    // Testing API to quickly get some data
    const response = await axios.get("https://jsonplaceholder.typicode.com/users");
    const users = response.data;

    store.dispatch({
      type: 'USER',payload: users[0]
    })

  }
)

about.js页面只有Link，因此我可以转到主页（index.js）：

import Head from 'next/head'
import Link from 'next/link'

export default function About() {
  return (
    <div>
      <Head>
        <title>About Page</title>
        <link rel="icon" href="favicon.ico" />
      </Head>

      <h1>About</h1>

      <Link href="/">
        <a>Home</a>
      </Link>
    </div>
  )
}

store.js我的商店接受getServerSideProps中index.js调用的USER操作，并准备将该商店提供给客户端：

import { createStore } from 'redux'
import { HYDRATE,createWrapper } from 'next-redux-wrapper'

const reducer = (state,action) => {
  switch (action.type) {
    case HYDRATE:
      console.log(action.payload);
      return {...state,...action.payload};
    case 'USER':
      // accept user data from getServerSideProps method that is called in index.js
      console.log("USER"); 
      return {...state,user: action.payload}
    default:
      return state
  }
}

const makeStore = context => createStore(reducer);

export const wrapper = createWrapper(makeStore,{debug: true});

我在<Users />（根页）中显示的

index.js组件。它使用获取的API数据显示user.name。这是我得到错误的地方。

import React from 'react'

import { useDispatch,useSelector } from "react-redux";

function Users() {
  const user = useSelector(state => state.user);
  return (
    <div>
      <p>{user.name}</p>
    </div>
  )
}

export default Users

我知道getServerSideProps does not return a page,when client-side routing。然后，如何使它（ getServerSideProps ）返回水合的商店并将其转发给客户端？同样，直接访问页面时，商店的转发就很好，但是在客户端路由时如何做同样的工作？

如果不能，那么在不直接请求页面时如何停止运行 getServerSideProps 方法，以免浪费我的资源（我的意思是，如果可以的话） '不转发更新的 store ，那么通过客户端路由访问的 getServerSideProps 没有任何目的吗？

当客户端路由到页面时，Redux Store未定义

如何解决当客户端路由到页面时，Redux Store未定义

相关推荐