{"id":21404760,"url":"https://github.com/fakundo/next-redux-store","last_synced_at":"2026-04-13T17:08:14.521Z","repository":{"id":74039916,"uuid":"545110748","full_name":"fakundo/next-redux-store","owner":"fakundo","description":"Next integration with Redux","archived":false,"fork":false,"pushed_at":"2023-04-18T14:59:20.000Z","size":736,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-23T11:03:16.142Z","etag":null,"topics":["next","nextjs","redux"],"latest_commit_sha":null,"homepage":"https://fakundo.github.io/next-redux-store/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fakundo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-03T19:58:37.000Z","updated_at":"2022-10-05T17:50:21.000Z","dependencies_parsed_at":"2025-01-23T03:50:56.995Z","dependency_job_id":null,"html_url":"https://github.com/fakundo/next-redux-store","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Fnext-redux-store","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Fnext-redux-store/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Fnext-redux-store/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fakundo%2Fnext-redux-store/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fakundo","download_url":"https://codeload.github.com/fakundo/next-redux-store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243902291,"owners_count":20366259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["next","nextjs","redux"],"created_at":"2024-11-22T16:18:00.248Z","updated_at":"2025-10-24T18:32:19.643Z","avatar_url":"https://github.com/fakundo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-redux-store\n\n[![npm](https://img.shields.io/npm/v/next-redux-store.svg)](https://www.npmjs.com/package/next-redux-store)\n\nNext integration with Redux.\n\nFeatures:\n- state can be passed to the client once on the first render\n- it's also possible to load page-level state between page transitions\n- uses HYDRATE action only for pages that contain state in their props\n- SSG and SSR work great\n\n## Installation\n  \n```\nnpm i next-redux-store\n```\n\n## Demo\n\n[Demo with RTK Query](https://fakundo.github.io/next-redux-store/)\n/\n[Source](https://github.com/fakundo/next-redux-store/blob/master/packages/docs)\n\n## Usage\n\n1. Configure your [custom App](https://nextjs.org/docs/advanced-features/custom-app) to use Redux store\n\n```js\nimport { AppProps } from 'next/app';\nimport { StoreProvider } from 'next-redux-store';\nimport { makeStore } from 'modules/makeStore';\n\nexport default function _App(appProps: AppProps\u003cany\u003e) {\n  const { Component, pageProps } = appProps;\n  return (\n    \u003cStoreProvider makeStore={makeStore} appProps={appProps}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/StoreProvider\u003e\n  );\n}\n```\n\n\u003e **_NOTE:_** makeStore must accept preloadedState as an argument.\nSee [example](https://github.com/fakundo/next-redux-store/blob/master/packages/docs/modules/makeStore.ts#L4).\n\n2. Configure your [custom Document](https://nextjs.org/docs/advanced-features/custom-document) to provide initial state for the App\n\n```js\nimport { createGetInitialProps } from 'next-redux-store/server';\nimport { makeStore } from 'modules/makeStore';\n\nconst getInitialState = async (ctx, appProps) =\u003e {\n  const store = makeStore();\n  // Fill the store considering the App props and Document context\n  // See example (https://github.com/fakundo/next-redux-store/blob/master/packages/docs/pages/_document.tsx#L14)\n  return store.getState();\n}\n\nexport default class _Document extends Document {\n  static getInitialProps = createGetInitialProps(getInitialState);\n\n  render() {\n    ...\n  }\n}\n```\n\n3. 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).\n\n```js\nimport { serverSideState } from 'next-redux-store/server';\n\nexport const getStaticProps = async () =\u003e {\n  const store = makeStore();\n  // Fill the store\n  const initialState = store.getState();\n  return {\n    props: {\n      ...serverSideState(initialState),\n    },\n  };\n}\n```\n\n## API\n\n`import { StoreProvider } from 'next-redux-store'`\n\n```ts\nimport { ProviderProps } from 'react-redux';\ninterface StoreProviderProps extends Omit\u003cProviderProps, 'store'\u003e {\n  appProps: AppProps\u003cany\u003e;\n  makeStore: (preloadedState: any | undefined) =\u003e any;\n}\ndeclare class StoreProvider extends Component\u003cStoreProviderProps\u003e {}\n```\n\n`import { createGetInitialProps } from 'next-redux-store/server';`\n\nFunction createGetInitialProps creates a function that returns initial props for the Document, providing initial state of the store for the App.\n\n```ts\ntype CreateInitialState = (ctx: DocumentContext, appProps: AppProps\u003cany\u003e | undefined) =\u003e any;\nconst createGetInitialProps: (createInitialState: CreateInitialState) =\u003e (ctx: DocumentContext) =\u003e DocumentInitialProps;\n```\n\nFunction createInitialState accepts Document context and App props as parameters and returns initial state of the store.\n\n`import { serverSideState } from 'next-redux-store/server';`\n\nFunction serverSideState accepts state of the store and returns page props.\n\n`import { HYDRATE } from 'next-redux-store';`\n\nHYDRATE returns name of the hydration action.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Fnext-redux-store","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffakundo%2Fnext-redux-store","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffakundo%2Fnext-redux-store/lists"}