0

套餐:

  1. redux-observable@2.0.0-rc.2
  2. rxjs最新的
  3. universal-rxjs-ajax开发分支
  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,
          };
        })
      )
    )
  );

reducerincase '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' } }

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

如果有人有任何建议,请

4

1 回答 1

0

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

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

于 2021-06-05T16:52:52.807 回答