Не удается заставить Redux (Thunks) работать с Next JS, используя обертку next-redux: getInitalProps не вызывается - PullRequest
Новая
       19

Не удается заставить Redux (Thunks) работать с Next JS, используя обертку next-redux: getInitalProps не вызывается

0 голосов
/ 30 января 2020

Я пытаюсь заставить Redux работать с thunks, используя next-redux-wrapper. Я посмотрел на пример кода, но мой код не работает. Я ходил взад и вперед и больше не видел леса за деревьями. В данный момент мой 'getInitialProps' в index. js не вызывается, поэтому мои данные никогда не загружаются, потому что я никогда не отправляю действие загрузки данных. Магазин создан, но он пуст.

Любая помощь высоко ценится! Это расстраивает ... 

// _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

РЕДАКТИРОВАТЬ:

Это сработало. Я предполагаю, что это должен быть класс, хотя пример на сайте Next JS использует функциональный компонент 

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 Ответ

2 голосов
/ 07 февраля 2020

Я столкнулся с той же проблемой, что и вы, и после прочтения комментариев здесь и с вашим решением вашей проблемы я переписал то, что у меня было как функциональный компонент, и он работает, так что если вы хотите использовать его или для тех, у кого такая же проблема, вот решение: 

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...