NextJS：“`HYDRATION`”操作在使用“`redux观察者”时不接收服务器有效负载

Question

套餐：

1. redux-observable@2.0.0-rc.2
2. rxjs latest
3. universal-rxjs-ajax dev branch
4. next-redux-wrapper latest
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,
          };
        })
      )
    )
  );

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

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操作：

console.log('HYDRATE >', action.payload); // logs out "HYDRATE > { server: { data: null } }"

如果我从'SERVER_ACTION'内部分派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: {},
  };
});

HYDRATE操作在reducer中接收有效负载：

HYDRATE > { server: { data: 'https://rickandmortyapi.com/api/character' } }

我不明白我的代码有什么问题。

它可能是某个库中的一个bug吗？还是我的代码出错了？

如果有人有任何建议，请

Answer 1

@PYTHON DEVELOPER999它可能是由于对下一个redux包装器的最新更新，很少有迁移步骤=>。

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