NextJS：使用“redux-observable”时，“HYDRATION”操作未接收服务器有效负载

Posted 2023-03-30

【中文标题】NextJS：使用“redux-observable”时，“HYDRATION”操作未接收服务器有效负载

【英文标题】：NextJS: `HYDRATION` action doesn't receive server payload when using `redux-observable`

【发布时间】：2021-08-23 03:41:35

【问题描述】：

包：

redux-observable@2.0.0-rc.2 rxjs最新 universal-rxjs-ajaxdev 分支 next-redux-wrapper最新 next.js最新

我有一个带有getStaticProps 的简单页面：

export const getStaticProps = wrapper.getStaticProps((store) => async (ctx) => 
  store.dispatch( type: 'ADD_DATA' );
  // const response = await fetch('https://rickandmortyapi.com/api');
  // const data = await response.json();

  // store.dispatch( type: 'SERVER_ACTION', payload: data.characters );
  return 
    props: ,
  ;
);

动作'ADD_DATA'触发动作'SERVER_ACTION'：

export const AddDataEpic: Epic = (action$) =>
  action$.pipe(
    ofType('ADD_DATA'),
    mergeMap((action) =>
      request( url: 'https://rickandmortyapi.com/api' ).pipe(
        map((response) => 
          return 
            type: 'SERVER_ACTION',
            payload: response.response.characters,
          ;
        )
      )
    )
  );

在case 'SERVER_ACTION': 子句中的reducer 内，我收到了有效负载：

const server = (state: State =  data: null , action: AnyAction) => 
  switch (action.type) 
    case HYDRATE: 
      console.log('HYDRATE >', action.payload); // logs out "HYDRATE >  server:  data: null  "
      return 
        ...state,
        ...state.server,
        ...action.payload.server,
      ;
    

    case 'SERVER_ACTION': 
      console.log('SERVER_ACTION >', action.payload); // logs out "SERVER_ACTION > https://rickandmortyapi.com/api/character"
      return 
        ...state,
        ...state.server,
        data: action.payload,
      ;
    

    default:
      return state;
  
;

但是负载没有传递给HYDRATE action:console.log('HYDRATE >', action.payload); // logs out "HYDRATE > server: data: null "

如果我从getStaticProps 内部调度'SERVER_ACTION' 操作：

export const getStaticProps = wrapper.getStaticProps((store) => async (ctx) => 
  // store.dispatch( type: 'ADD_DATA' );
  const response = await fetch('https://rickandmortyapi.com/api');
  const data = await response.json();

  store.dispatch( type: 'SERVER_ACTION', payload: data.characters );
  return 
    props: ,
  ;
);

reducer 内的HYDRATE 操作接收有效负载：HYDRATE > server: data: 'https://rickandmortyapi.com/api/character'

我不明白我的代码有什么问题。 可能是其中一个库中的错误吗？还是我的代码有错误？

如果有人有任何建议，请

【问题讨论】：

您找到解决方法了吗？

我收到了关于我的 github 问题的回复：github.com/kirill-konshin/next-redux-wrapper/issues/376 他们建议从这里 ***.com/questions/48950278/… 遵循解决方案，但我自己没有尝试过

【参考方案1】：

@PYTHON DEVELOPER999 可能是由于 next-redux-wrapper 的最新更新，迁移步骤很少 =>

https://github.com/kirill-konshin/next-redux-wrapper#upgrade-from-6x-to-7x