无法使用next- Redux -wrapper让redux使用NextJS :未调用getInitalProps
无法使用next- Redux -wrapper让redux使用NextJS :未调用getInitalProps
提问于 2020-01-31 00:13:58
我正在尝试让Redux使用next-redux-wrapper来处理thunks。我已经查看了示例代码，但我的代码无法工作。我来回奔波，不再只见树木不见森林。目前，我在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);回答 1
Stack Overflow用户
发布于 2020-02-07 21:51:55
我和你面临着同样的问题，在阅读了这里的评论和你对问题的解决方案后，我重写了我的功能组件，它正在工作，所以如果你想使用或者对于任何有同样问题的人，这里有一个解决方案：
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);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59990153
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号