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

Question

包：

1. redux-observable@2.0.0-rc.2
2. rxjs最新
3. universal-rxjs-ajaxdev 分支
4. next-redux-wrapper最新
5. 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' } }

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

如果有人有任何建议，请

Answer 1

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

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