When implementing `redux-observable` with NextJS, the `HYDRATION` action may not properly receive the server payload

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 am working on 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: {},
  };
});

The 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,
          };
        })
      )
    )
  );

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

However, the payload isn't passed to the HYDRATE action:

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

If I dispatch the 'SERVER_ACTION' action from within 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 receives the payload:

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

I am struggling to understand what's wrong with my code.
Could this be a bug in one of the libraries? Or is it a mistake in my implementation?

If anyone has any insights or suggestions, PLEASE share.

Answer №1

@PYTHON EXPERT123 Could the issue possibly be related to the recent update on next-redux-wrapper? It seems there are some migration steps to follow =>

https://example.com/migration-steps

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Supporting wildcard redirect URLs for Vercel in Asp .Net Identity Server

Currently, I am working with Duende IdentityServer for my back-end RestApi and using Vercel to test the front-end. However, I am facing an issue where I cannot login to IdentityServer with Vercel due to the redirectUrl not being allowed. I have come acros ...

The lint stage overlooked a specifically stated file due to the presence of unfavorable glob patterns

While attempting to commit Next.js with NextAuth, the lint stage encountered an error: An explicitly specified file was ignored due to negative glob patterns: "c:/projects/project01/app/api/auth/[...nextauth]/route.ts". The lint stage configuration in pac ...

Using the MUI `useTheme` hook within a server-side component

Is there a way to utilize my MUI (material ui) theme definition in a server component without using the 'use client' directive? Typically, I rely on the handy useTheme hook. However, this approach requires me to convert it into a client component ...

Unlock the power of dynamic routes in Reactjs with this comprehensive guide

Currently, I am delving into the world of Reactjs and Nextjs, specifically working on dynamic routes. To elaborate, I have a list of blogs that I would like to showcase in detail. For this purpose, I created a folder named "blogs" and nested a file called ...

What is the best way to retrieve a variable that has been exported from a page and access it in _

Suppose this is my pages/visitor.tsx const PageQuery = 'my query'; const Visitor = () => { return <div>Hello, World!</div>; }; export default Visitor; How can I retrieve PageQuery in _app.tsx? One approach seems to be by assi ...

Greetings! I am currently facing some challenges with integrating Stripe into Next.js

Looking to create a personalized checkout page with Next.js and utilize its built-in API. Which form tool would be best for implementing validations, or are there ready-made templates available within Stripe? How should I go about integrating them? Any spe ...

Filtering tables with checkboxes using Next.js and TypeScript

I've recently delved into Typescript and encountered a roadblock. While I successfully tackled the issue in JavaScript, transitioning to Typescript has left me feeling lost. My dilemma revolves around fetching data from an API and populating a table u ...

Angular Rxjs repeatWhen: when none of the statuses are COMPLETED

If the status in my Angular Service file is not 'COMPLETED' for all data, I need to retry hitting the same URL up to 5 times with a delay of 5 seconds. [ { "data": [ //SET OF OBJECTS ], "status": ...

Is there an rxjs operator that includes both on-next and on-error callbacks?

Is there a similar function to promise.then(onNextCallback,onErrorCallback) in rxjs that I can use? I've already tried alternatives like pipe(concatMap(),catchError) but they are not what I am looking for. ...

Error: The import of 'Link' from 'next/link' in './components/Layout/Navbar.js' was unsuccessful as it is not being exported

/components/Layout/Navbar.js Error: Unable to import 'Link' from 'next/link' (imported as 'Link'). ./components/Layout/Navbar.js Error: Unable to import 'Link' from 'next/link' (imported as 'Link&apos ...

Creating multilingual URLs in Next.js for both Latin and non-Latin languages

Our team is embarking on creating a react web app using next.js, but we're facing a challenge with implementing multilanguage URLs. Our objective is to ensure that the same content in different languages has unique URL slugs. For instance, www.tld.com ...

What is the best way to create a function that can securely search for a URL containing parameters while ensuring type safety?

I am working on a NextJS/React application. We have a large object containing internal URLs, each with a createPath function that looks similar to this: const URLS = { dashboard: { createPath: ({ accountNumber }: { accountNumber: string }) => ...

When I try to ng build my Angular 11 application, why are the type definitions for 'Iterable', 'Set', 'Map', and other types missing?

As someone new to Angular and the node ecosystem, I'm facing a challenge that may be due to a simple oversight. The issue at hand: In my Angular 11 project within Visual Studio 2019, configured with Typescript 4, attempting to run the project throug ...

The user fails to be redirected following wallet authentication in NextJS

Can someone help me figure out how to redirect the user to the onboard page after successfully connecting to their wallet? Web3Button doesn't seem to be returning anything and I'm stuck. import React, { useEffect } from "react"; import ...

Embrace the flexibility of using Next.js with or without Express.js

Recently, I started the process of migrating a project from create-react-app to next.js. However, I am facing uncertainty when it comes to migrating the backend of the project. Currently, my backend is built with an express server. In next.js, there are p ...

Is it feasible to utilize Google Calendar API for JavaScript through npm install? Alternatively, can the Google Calendar API be utilized for Node.js in the browser within Next.js?

Looking to integrate the Google Calendar API as a library in your Next.js project without using _document.tsx? I have explored two potential approaches for achieving this: Utilize the google calendar api for JavaScript by installing it via npm Use the goo ...

Optimizing Next.js links for seamless functionality when deployed on AWS Cloudfront

I'm currently in the process of setting up a prototype project with Next.js by utilizing a Static html export (specifically, next export) and then transferring the output to AWS S3 for Cloudfront to serve. In my /pages directory, I have the following ...

What are the steps for utilizing CSS Global Variables?

Hey there, thank you for taking the time to help me out. I'm having a simple doubt that I just can't seem to figure out. So... here's my '/pages/_app.js' file: import '../public/styles/global.css'; export default funct ...

Error in authorization type for email provider in Next-Auth

My experience with Next.js has mainly been on the frontend, but I'm diving into the backend and functionality for the first time. After struggling for about 4 hours, I still can't figure out how to differentiate between email providers for my two ...

Is it possible to receive a unique value error even when providing the correct key value in a map?

I encountered an issue while using a map function with an array in my application. Even though I have provided a unique key, Google Chrome console is still showing an error related to the unique key. Error Each child in a list should have a unique "ke ...