如何从 getInitialProps 内部派发一个动作？

Question

我正在尝试在 Next.js 应用程序中实现 Redux，但在 getInitialProps 中无法使用调度功能。由于某种我无法弄清楚的原因，商店被退回为未定义。我正在使用 next-redux-wrapper。我已经按照 next-redux-wrapper GitHub 页面上的文档进行操作，但是在某处出错了。我知道代码正在运行 - 我使用 axios 直接获取 artPieces 然后它工作得很好但我想改用 Redux。我正在将 react/express.js 应用程序更改为 Next.js 应用程序，我将在其中使用 API 进行所需的基本服务器操作。这只是一个小博客应用。

这是我的 store.js:

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

// create your reducer
const reducer = (state = { tick: 'init' }, action) => {
    switch (action.type) {
        case HYDRATE:
            return { ...state, ...action.payload };
        case 'TICK':
            return { ...state, tick: action.payload };
        default:
            return state;
    }
}; 

// create a makeStore function  
const makeStore = (context) => createStore(reducer);

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

这里是 _app.js:

import './styles/globals.css';
import { wrapper } from '../store';

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

export default wrapper.withRedux(MyApp);

最后这里是它不起作用的地方。尝试在上下文中将调度调用到 _app.js:

的子组件

import React from 'react';
import { ArtPiecesContainer } from './../components/ArtPiecesContainer';
import { useDispatch } from 'react-redux';
import axios from 'axios';
import { getArtPieces } from '../reducers';

const Art = ({ data, error }) => {
    return (
        <>
            <ArtPiecesContainer artPieces={data} />
        </>
    );
};

export default Art;

Art.getInitialProps = async ({ ctx }) => {
    await ctx.dispatch(getArtPieces());

    console.log('DATA FROM GETARTPIECES', data);

    return { data: ctx.getState() };
};

Answer 1

这可能适用于 "next-redux-wrapper": "^7.0.5"

_app.js

import { wrapper } from '../store'
import React from 'react';
import App from 'next/app';

class MyApp extends App {
  static getInitialProps = wrapper.getInitialAppProps(store => async ({Component, ctx}) => {
    return {
      pageProps: {
        // Call page-level getInitialProps
        // DON'T FORGET TO PROVIDE STORE TO PAGE
        ...(Component.getInitialProps ? await Component.getInitialProps({...ctx, store}) : {}),
        // Some custom thing for all pages
        pathname: ctx.pathname,
      },
    };

  });

  render() {
    const {Component, pageProps} = this.props;

    return (
      <Component {...pageProps} />
    );
  }
}

export default wrapper.withRedux(MyApp);

和Index.js

import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { END } from 'redux-saga'
import { wrapper } from '../store'
import { loadData, startClock, tickClock } from '../actions'
import Page from '../components/page'

const Index = () => {
  const dispatch = useDispatch()

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

  return <Page title="Index Page" linkTo="/other" NavigateTo="Other Page" />
}

Index.getInitialProps = wrapper.getInitialPageProps(store => async (props) => {
  store.dispatch(tickClock(false))

  if (!store.getState().placeholderData) {
    store.dispatch(loadData())
    store.dispatch(END)
  }

  await store.sagaTask.toPromise()
});


export default Index

对于其余代码，您可以参考 nextjs/examples/with-redux-saga，但现在我发布了这个答案，他们在 next-redux-wrapper（版本 6）.

如何从 getInitialProps 内部派发一个动作？

How to dispatch an action from inside getInitialProps?

javascript

redux

next.js

next-redux-wrapper