Posted on Dec 23, 2023 • Edited on Jun 28, 2024

Roast my Next npm package....

So yeah.... i've had a problem with dispatching redux thunk actions within Next.

and... it would make sense for it be done the Next kinda way.

async function getData() { const res = await fetch('https://api.example.com/...') // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error('Failed to fetch data') } return res.json() } export default async function Page() { const data = await getData() return <main></main> }

I made a package that will allow you to dispatch thunk actions within the Next getData callback.

Declare some thunk actions

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; export const fetchContent = createAsyncThunk( "content/fetchContent", async () => { const res = await fetch("https://jsonplaceholder.typicode.com/photos"); const data = await res.json(); return data; }, );

import createReduxFetch, add thunkActions as a second argument, pass your callbacks in that object.

import { fetchContent } from "./thunkActions"; import { createReduxFetch } from "next-redux-fetch"; export const store = createReduxFetch( { reducer: {} }, // add whatever redux logic.  { thunkActions: { fetchContent }, }, ); // Infer the `RootState` and `AppDispatch` types from the store itself export type RootState = ReturnType<typeof store.getState>; // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} export type AppDispatch = typeof store.dispatch;

Call as the following:

note: bootstrap.tsx is just a client wrapper.

"use client"; import dynamic from "next/dynamic"; import React from "react"; const Demo = dynamic(() => import("../../components/demo"), { ssr: false, }); export default function Bootstrap({ data }: { data: Record<string, any> }) { return <Demo data={data} />; }

Then the following:

import { store } from "../../../redux/store/store"; import Bootstrap from "./bootstrap"; async function getData() { const res = await store.dispatch(store.thunkActions.fetchContent()); return res; } export default async function Page() { const data = await getData(); return <Bootstrap data={data} />; }