Registry / devops / next-redux-fetch

next-redux-fetch

library1.6.7jsnpmunverified

Integrates Redux dispatch actions into Next.js data fetching by wrapping createAsyncThunk thunks into a custom store. Version 1.6.7 is in beta and not production-ready. Requires @reduxjs/toolkit ^2.0.1, Next.js, React, and Redux ^5.0.0. Key differentiators: allows using Redux thunks for both server-side and client-side data fetching in Next.js App Router, but is still experimental with API subject to change.

devops

npm install next-redux-fetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NEXT-REDUX-FETCH

next-redux-fetch

devopsjavascriptv1.6.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createReduxFetch

✓ import { createReduxFetch } from 'next-redux-fetch'

✗ const { createReduxFetch } = require('next-redux-fetch')

Package is ESM-only, require() will fail in Node.js environments. Always use ES import.

Shows setup: create async thunks, create store with createReduxFetch, use store.dispatch with thunkActions in a server component, and wrap client component in dynamic import.

// thunkActions.ts import { createAsyncThunk } from '@reduxjs/toolkit'; export const fetchContent = createAsyncThunk( 'content/fetchContent', async () => { const res = await fetch('https://jsonplaceholder.typicode.com/photos'); return res.json(); }, ); // store.ts import { createReduxFetch } from 'next-redux-fetch'; import { fetchContent } from './thunkActions'; export const store = createReduxFetch( { reducer: {} }, { thunkActions: { fetchContent } }, ); export type RootState = ReturnType<typeof store.getState>; export type AppDispatch = typeof store.dispatch; // app/page.tsx import { store } from './store'; import Bootstrap from './bootstrap'; export default async function Page() { const data = await store.dispatch(store.thunkActions.fetchContent()); return <Bootstrap data={data} />; } // bootstrap.tsx (client component) 'use client'; import dynamic from 'next/dynamic'; const Demo = dynamic(() => import('./demo'), { ssr: false }); export default function Bootstrap({ data }: { data: Record<string, any> }) { return <Demo data={data} />; }

Debug

Known issues

breakingPackage is in beta and not ready for production. API may change without notice.

fix

Do not use in production. Consider alternatives like RTK Query or plain fetch.

affects: >=0.0.0

deprecatedPeer dependency redux required version ^5.0.0 but @reduxjs/toolkit ^2.0.1 includes redux internally. Explicit redux dep may cause conflicts.

fix

Ensure redux ^5.0.0 is installed alongside @reduxjs/toolkit. Use yarn/npm dedupe to resolve version conflicts.

affects: >=1.0.0 <2.0.0

gotchastore.thunkActions property is injected by createReduxFetch but may conflict with user-defined reducer keys.

fix

Do not name any reducer as 'thunkActions' to avoid naming collision.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: store.thunkActions is undefined

store created without using createReduxFetch or missing thunkActions config.

fix

Use createReduxFetch and pass thunkActions option: createReduxFetch({ reducer: {} }, { thunkActions: { myAction } })

Module not found: Can't resolve 'next-redux-fetch'

Package not installed or used in environment where node_modules not resolved (e.g., browser).

fix

Run: npm install next-redux-fetch (or yarn add next-redux-fetch). Ensure the import is in a file processed by bundler.

Cannot use import statement outside a module

Using ES import syntax in a CommonJS file or older Node version.

fix

Set 'type': 'module' in package.json, or use .mjs extension, or switch to dynamic import().

createAsyncThunk is not a function

Incorrect import from @reduxjs/toolkit (maybe misspelled or wrong version).

fix

Verify @reduxjs/toolkit ^2.0.1 is installed: npm list @reduxjs/toolkit. Import as: import { createAsyncThunk } from '@reduxjs/toolkit'

Upgrade

Version history

1.6.7latest on npm

Audit

Dependencies

@reduxjs/toolkitrequiredPeer dependency required for createAsyncThunk and createSlice

nextrequiredPeer dependency required for Next.js framework features

reactrequiredPeer dependency required for React components

reduxrequiredPeer dependency required for Redux store functionality

Agent activity

7 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/EliHood/next-redux-fetch ↗

packagenext-redux-fetch ↗

homepagehttps://github.com/EliHood/next-redux-fetch#readme ↗