0

Packages:

  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 latest

I have a simple Page with 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: {},
  };
});

Action 'ADD_DATA' triggers action '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,
          };
        })
      )
    )
  );

Inside the reducer in the case 'SERVER_ACTION': clause I receive the payload:

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;
  }
};

But the payload isn't passed to HYDRATE action:
console.log('HYDRATE >', action.payload); // logs out "HYDRATE > { server: { data: null } }"

If I dispatch the 'SERVER_ACTION' action from inside the 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: {},
  };
});

The HYDRATE action inside the reducer receive the payload:
HYDRATE > { server: { data: 'https://rickandmortyapi.com/api/character' } }

I don't understand what's wrong with my code.
May it be a bug in one of the libraries? Or is it a mistake in my code?

If anyone has any suggestions, PLEASE

  • Did you find a workaround for this ? – Safwen Daghsen Aug 06 '21 at 14:41
  • I got a reply on my github issue: https://github.com/kirill-konshin/next-redux-wrapper/issues/376 they propose to follow the solution from here https://stackoverflow.com/questions/48950278/redux-observable-await-async-actions-and-convert-them-to-promise-using-rootepi but I haven't tried it myself – PYTHON DEVELOPER999 Sep 10 '21 at 16:38

1 Answers1

0

@PYTHON DEVELOPER999 It might be due to the latest update on next-redux-wrapper, there are few migration steps =>

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

Kamlesh Katpara
  • 373
  • 2
  • 8
  • 31