无法使用 next-redux-wrapper 让 Redux (Thunks) 与 NextJS 一起工作：未调用 getInitalProps
Posted
技术标签:
【中文标题】无法使用 next-redux-wrapper 让 Redux (Thunks) 与 NextJS 一起工作：未调用 getInitalProps【英文标题】：Can't get Redux (Thunks) to work with NextJS using next-redux-wrapper: getInitalProps not called 【发布时间】：2020-05-16 07:29:48 【问题描述】：我正在尝试使用 next-redux-wrapper 让 Redux 与 thunk 一起工作。我查看了示例代码，但我的代码不起作用。我来回走动，不再只见树木不见森林。目前我在 index.js 中的“getInitialProps”没有被调用，因此我的数据永远不会加载，因为我从不调度数据加载操作。商店已创建，但它是空的。
非常感谢任何帮助！这令人沮丧...
// _app.js
import createStore from "redux";
import Provider from "react-redux";
import App from "next/app";
import withRedux from "next-redux-wrapper";
import initStore from '../redux/store'
function MyApp( Component, pageProps,store )
console.log('in _app', store.getState())
return (
<Provider store=store>
<Component ...pageProps />
</Provider>
);
export default withRedux(initStore,debug:true)(MyApp);
// store.js
import configureStore from '@reduxjs/toolkit'
import rootReducer from './root-reducer'
const store = () => configureStore(
reducer: rootReducer,
)
export default store
// index.js
import React from 'react'
import Head from 'next/head'
import Nav from '../components/nav'
import useDispatch from "react-redux"
import fetchPosts from '../redux/posts'
const Home = () =>
return (<div>
<Head>
<title>Home</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Nav />
<div className="hero">
<h1 className="title">Welcome YAA!</h1>
</div>
</div>)
Home.getInitialProps = async (store,isServer) =>
console.log('about to dispatch')
store.dispatch(fetchPosts())
return store,isServer
export default Home
编辑：
这行得通。我想它必须是一个类，尽管 NextJS 网站上的 example 使用了一个功能组件
import App from 'next/app'
import React from 'react'
import withRedux from "next-redux-wrapper";
import Provider from 'react-redux'
import initStore from '../redux/store'
const makeStore = (initialState, options) =>
return initStore(initialState)
;
class MyApp extends App
static async getInitialProps(Component, ctx)
const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : ;
return pageProps;
render()
// @ts-ignore
const Component, pageProps, store = this.props;
return (
<Provider store=store>
<Component ...pageProps />
</Provider>
);
export default withRedux(makeStore)(MyApp);
【问题讨论】：
可以用函数式组件调用吗？没想到这是可能的 @JoeLloyd，使用类似乎可行。但是 NextJS 网站上的示例使用了一个函数式组件——github.com/zeit/next.js/blob/canary/examples/with-redux-wrapper/… 您链接的示例不使用getInitialProps。很确定它只能在一个类中使用。
@JoeLloyd -- 当你说“它只能在课堂上使用”时，我不知道“它”是什么。如果您使用类编写/page/_app.js，您似乎是对的，只有让 next-redux-wrapper 工作。根据我上面的编辑。我想这就是你的意思——你知道为什么会这样吗？
@JoeLloyd -- 您可以将getInitalProps 与功能组件一起使用，请参阅nextjs.org/docs/api-reference/data-fetching/getInitialProps -- 或者我可能误解了您...
【参考方案1】：
我遇到了和你一样的问题，在阅读了这里的 cmets 并解决了你的问题后，我重写了我所拥有的功能组件并且它正在工作，所以如果你想使用或任何有同样问题的人，这里是解决方案：
import Provider from "react-redux";
import withRedux from "next-redux-wrapper";
import initStore from "../store/store";
import "./styles.scss";
const MyApp = props =>
const Component, pageProps, store = props;
return (
<Provider store=store>
<Component ...pageProps />
</Provider>
);
;
MyApp.getInitialProps = async ( Component, ctx ) =>
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: ;
return pageProps ;
;
export default withRedux(initStore)(MyApp);【讨论】：
为什么同时使用next-redux-wrapper和<Provider>？
你 don't need next-redux-wrapper 如果你使用的是Redux-Thunk
如果你想从 _app.js getInitialProps 中派发一个动作怎么办 - 你如何访问商店来派发它？
我写了这个。你可以看看这个例子。它也做了同样的事情。 github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist.以上是关于无法使用 next-redux-wrapper 让 Redux (Thunks) 与 NextJS 一起工作：未调用 getInitalProps的主要内容，如果未能解决你的问题，请参考以下文章
next-redux-wrapper Wrapper.getStaticProps 无法使用
如何使用 typescript、next-redux-wrapper、getServerSideProps？
将 getStaticProps 与 next-redux-wrapper 一起使用
使用 next-redux-wrapper 将 Google Analytics 添加到 Nextjs 应用程序
Next.js：在 getServerSideProps 中使用带有 TypeScript 的 next-redux-wrapper 调用 Thunks？