# next-redux-fetch

> Dispatch thunk actions in place of fetch for data fetching.

Latest version **1.6.7** (published 2023-12-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install next-redux-fetch
pnpm add next-redux-fetch
yarn add next-redux-fetch
bun add next-redux-fetch
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.7 |
| Published | 2023-12-19 |
| First published | 2023-12-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Eli Hood |
| Maintainers | elihood |

## Links

- npm: https://www.npmjs.com/package/next-redux-fetch
- Repository: https://github.com/EliHood/next-redux-fetch
- Homepage: https://github.com/EliHood/next-redux-fetch#readme
- Issues: https://github.com/EliHood/next-redux-fetch/issues
- npm.io page: https://npm.io/package/next-redux-fetch

## Dependencies (1)

- [loadash](https://npm.io/package/loadash.md) ^1.0.0

## Recent versions

- 1.6.7 (latest) — 2023-12-19
- 1.6.6 — 2023-12-19
- 1.6.5 — 2023-12-18
- 1.6.4 — 2023-12-18
- 1.6.3 — 2023-12-17
- 1.6.2 — 2023-12-17
- 1.6.1 — 2023-12-17
- 1.6.0 — 2023-12-16
- 1.5.8 — 2023-12-15
- 1.5.7 — 2023-12-15
- 1.5.6 — 2023-12-15
- 1.5.5 — 2023-12-15
- 1.5.2 — 2023-12-15
- 1.5.1 — 2023-12-15
- 1.5.0 — 2023-12-15
- … 37 more at https://npm.io/package/next-redux-fetch/versions

## README

## Next Redux Fetch

- Integrate Redux dispatch api actions into your existing Next JS project.

### Dev in Progress (still in beta, not ready for prod).

### To use

- `yarn add next-redux-fetch`

### Current flow might change

#### 1) Declare thunk functions

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

export const fetchContent1 = createAsyncThunk(
  "content/fetchContent",
  async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await res.json();
    return data;
  },
);
```

#### 2) import in `createReduxFetch`

```typescript
import { fetchContent } from "./thunkActions";
import { createReduxFetch } from "next-redux-fetch";

export const store = createReduxFetch(
  { reducer: {}  }, // add in the basic configure store props.
  {
    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;
....
```

#### 3) Declare your client side component in a bootstrap file, or whatever name you prefer.

```typescript
"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} />;
}

```

#### 4) Declare `getData` callback as followed:

```typescript
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(); //  destructure data prop on the component your using it on e.g data?.payload.
  return <Bootstrap data={data} />;
}
```

### Result

---

![Alt text](image.png)

---
_Source: https://npm.io/package/next-redux-fetch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._