https://github.com/fakundo/next-redux-store
Next integration with Redux
https://github.com/fakundo/next-redux-store
next nextjs redux
Last synced: 2 months ago
JSON representation
Next integration with Redux
- Host: GitHub
- URL: https://github.com/fakundo/next-redux-store
- Owner: fakundo
- License: mit
- Created: 2022-10-03T19:58:37.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T14:59:20.000Z (about 3 years ago)
- Last Synced: 2025-02-23T11:03:16.142Z (over 1 year ago)
- Topics: next, nextjs, redux
- Language: TypeScript
- Homepage: https://fakundo.github.io/next-redux-store/
- Size: 719 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-redux-store
[](https://www.npmjs.com/package/next-redux-store)
Next integration with Redux.
Features:
- state can be passed to the client once on the first render
- it's also possible to load page-level state between page transitions
- uses HYDRATE action only for pages that contain state in their props
- SSG and SSR work great
## Installation
```
npm i next-redux-store
```
## Demo
[Demo with RTK Query](https://fakundo.github.io/next-redux-store/)
/
[Source](https://github.com/fakundo/next-redux-store/blob/master/packages/docs)
## Usage
1. Configure your [custom App](https://nextjs.org/docs/advanced-features/custom-app) to use Redux store
```js
import { AppProps } from 'next/app';
import { StoreProvider } from 'next-redux-store';
import { makeStore } from 'modules/makeStore';
export default function _App(appProps: AppProps) {
const { Component, pageProps } = appProps;
return (
);
}
```
> **_NOTE:_** makeStore must accept preloadedState as an argument.
See [example](https://github.com/fakundo/next-redux-store/blob/master/packages/docs/modules/makeStore.ts#L4).
2. Configure your [custom Document](https://nextjs.org/docs/advanced-features/custom-document) to provide initial state for the App
```js
import { createGetInitialProps } from 'next-redux-store/server';
import { makeStore } from 'modules/makeStore';
const getInitialState = async (ctx, appProps) => {
const store = makeStore();
// Fill the store considering the App props and Document context
// See example (https://github.com/fakundo/next-redux-store/blob/master/packages/docs/pages/_document.tsx#L14)
return store.getState();
}
export default class _Document extends Document {
static getInitialProps = createGetInitialProps(getInitialState);
render() {
...
}
}
```
3. Optional if you also would like to load state data for some pages within their props (just like [next-redux-wrapper](https://github.com/kirill-konshin/next-redux-wrapper) works), you can return that state inside getStaticPaths / getServerSideProps functions. That state will be populated to the store with HYDRATE action. So do not forget to configure reducers to handle it. See [example](https://github.com/fakundo/next-redux-store/blob/master/packages/docs/modules/pokemonApi.ts#L27).
```js
import { serverSideState } from 'next-redux-store/server';
export const getStaticProps = async () => {
const store = makeStore();
// Fill the store
const initialState = store.getState();
return {
props: {
...serverSideState(initialState),
},
};
}
```
## API
`import { StoreProvider } from 'next-redux-store'`
```ts
import { ProviderProps } from 'react-redux';
interface StoreProviderProps extends Omit {
appProps: AppProps;
makeStore: (preloadedState: any | undefined) => any;
}
declare class StoreProvider extends Component {}
```
`import { createGetInitialProps } from 'next-redux-store/server';`
Function createGetInitialProps creates a function that returns initial props for the Document, providing initial state of the store for the App.
```ts
type CreateInitialState = (ctx: DocumentContext, appProps: AppProps | undefined) => any;
const createGetInitialProps: (createInitialState: CreateInitialState) => (ctx: DocumentContext) => DocumentInitialProps;
```
Function createInitialState accepts Document context and App props as parameters and returns initial state of the store.
`import { serverSideState } from 'next-redux-store/server';`
Function serverSideState accepts state of the store and returns page props.
`import { HYDRATE } from 'next-redux-store';`
HYDRATE returns name of the hydration action.
## License
MIT