1.6.7 • Published 5 months ago
next-redux-fetch v1.6.7
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
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
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.
"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:
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
1.6.7
5 months ago
1.6.6
5 months ago
1.6.4
5 months ago
1.6.5
5 months ago
1.6.3
5 months ago
1.6.2
5 months ago
1.6.1
5 months ago
1.6.0
5 months ago
1.5.8
5 months ago
1.5.7
5 months ago
1.5.6
5 months ago
1.5.5
5 months ago
1.5.2
5 months ago
1.5.1
5 months ago
1.5.0
5 months ago
1.4.9
5 months ago
1.4.8
5 months ago
1.4.7
5 months ago
1.4.6
5 months ago
1.4.5
5 months ago
1.4.4
5 months ago
1.4.3
5 months ago
1.4.2
5 months ago
1.4.1
5 months ago
1.4.0
5 months ago
1.3.9
5 months ago
1.3.8
5 months ago
1.3.6
5 months ago
1.3.5
5 months ago
1.3.4
5 months ago
1.3.3
5 months ago
1.3.2
5 months ago
1.3.1
5 months ago
1.3.0
5 months ago
1.2.8
5 months ago
1.2.7
5 months ago
1.2.6
5 months ago
1.2.5
5 months ago
1.2.4
5 months ago
1.2.3
5 months ago
1.2.2
5 months ago
1.2.1
5 months ago
1.2.0
5 months ago
1.1.9
5 months ago
1.1.8
5 months ago
1.1.6
5 months ago
1.1.5
5 months ago
1.1.4
5 months ago
1.1.3
5 months ago
1.1.2
5 months ago
1.1.1
5 months ago
1.1.0
5 months ago