如何从 getInitialProps 内部调度一个动作？

Posted 2023-03-30

【中文标题】如何从 getInitialProps 内部调度一个动作？

【英文标题】：How to dispatch an action from inside getInitialProps?

【发布时间】：2021-12-11 03:31:47

【问题描述】：

我正在尝试在 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);

最后，这是它不起作用的地方。尝试在上下文中调用 dispatch 到子组件到 _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() ;
;

【问题讨论】：

请修改您的帖子标题，提出一个清晰、具体的问题，而不仅仅是列出标签。

你试过用wrapper.getInitialPageProps包装getinitialProps函数吗？

这是正确答案。我读了这么多帖子，但把实际文档彻底热了……

cmets/answers 旁边没有绿色勾号。为什么？？

【参考方案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 版）。