{"id":18817295,"url":"https://github.com/blueberryapps/redux-preload","last_synced_at":"2025-04-13T22:56:37.972Z","repository":{"id":19446247,"uuid":"86820759","full_name":"blueberryapps/redux-preload","owner":"blueberryapps","description":"Preload actions on both server \u0026 client side (allows deep nesting of components) ","archived":false,"fork":false,"pushed_at":"2023-01-24T17:28:40.000Z","size":402,"stargazers_count":20,"open_issues_count":12,"forks_count":1,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-04-02T16:50:05.880Z","etag":null,"topics":["blueberry-opensource","client-side-rendering","componentdidmount","javascript","prefetch","preload","react","redux","server-side-rendering"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/blueberryapps.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}},"created_at":"2017-03-31T13:13:35.000Z","updated_at":"2023-11-05T23:03:39.000Z","dependencies_parsed_at":"2023-02-13T23:45:46.443Z","dependency_job_id":null,"html_url":"https://github.com/blueberryapps/redux-preload","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/blueberryapps%2Fredux-preload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Fredux-preload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Fredux-preload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Fredux-preload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blueberryapps","download_url":"https://codeload.github.com/blueberryapps/redux-preload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710433,"owners_count":21149190,"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":["blueberry-opensource","client-side-rendering","componentdidmount","javascript","prefetch","preload","react","redux","server-side-rendering"],"created_at":"2024-11-08T00:10:41.960Z","updated_at":"2025-04-13T22:56:37.947Z","avatar_url":"https://github.com/blueberryapps.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Preload [![CircleCI](https://circleci.com/gh/blueberryapps/redux-preload.svg?style=svg\u0026circle-token=b54d37d1392ee458f361833c10992dc9068c3231)](https://circleci.com/gh/blueberryapps/redux-preload) [![Dependency Status](https://dependencyci.com/github/blueberryapps/redux-preload/badge)](https://dependencyci.com/github/blueberryapps/redux-preload)\n\n## Description\nModule is using to dispatch some actions (usually async data fetching) immediately after the rendering occurs. Works both on client and server sides.\n\n## Usage on client\n``` javascript\nimport preload from 'redux-preload';\n\n@preload([\n  // You can just pass a single action creator, or array of them\n  ({ someProp }) =\u003e ({ type: 'FETCH', payload: someProp })\n])\nclass Container extends Component {\n  render() {\n    return \u003cdiv /\u003e;\n  }\n}\n```\n\n## Usage on server\nOn server to get all goodness of _**isomorphic-deeply-nested-component-data-prefetch**_ you need to call `serverPreload(routerContext)` with router context.\n\nAnd also send preloaded data back to client using `window.__INITIAL_STATE__ = ${serialize(store.getState())};`\n\n`serverPreload` is a promise - when promise resolves data is already fetched (store is polluted with data) and now you can render your DOM\n\nHere is pseudo code that demonstrate that on server in `render.js`\n\n``` javascript\n\nimport { serverPreload } from 'redux-preload';\n\nconst getRouterContext = function(store, renderProps) {\n  return (\n    \u003cProvider store={store}\u003e\n      \u003cRouterContext {...renderProps} /\u003e\n    \u003c/Provider\u003e\n  );\n}\n\nconst renderHtml = (store, renderProps) =\u003e {\n  return '\u003c!DOCTYPE html\u003e' + ReactDOMServer.renderToStaticMarkup(\n    \u003chtml lang=\"en\"\u003e\n      \u003cbody\u003e\n        \u003cdiv dangerouslySetInnerHTML={{__html: ReactDOMServer.renderToString(\n          getRouterContext(store, renderProps)\n        )}} id=\"app\"\u003e\u003c/div\u003e\n        \u003cscript dangerouslySetInnerHTML={{__html:`\n            window.__INITIAL_STATE__ = ${serialize(store.getState())};\n        `}}\u003e\u003c/script\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n};\n\nexport default function render(req, res, next) {\n  const store = createStore(...);\n  ...\n  match({routes, location}, async (error, redirectLocation, renderProps) =\u003e {\n    ...\n    try {\n      await serverPreload(getRouterContext(store, renderProps));\n\n      const html = renderHtml(store, renderProps, req);\n      res.status(200).send(html);\n    } catch (exception) {\n      next(exception);\n    }\n  });\n}\n```\n\n#### Restore state sent from server\n\nOn client you need to revive state with data sent from server.\n\nYou can do it in `main.js`\n\n``` javascript\nconst store = createStore({\n  initialState: window.__INITIAL_STATE__\n});\n\nReactDOM.render(\n  \u003cProvider store={store}\u003e\n    \u003cRouter history={history}\u003e\n      {createRoutes(store.getState)}\n    \u003c/Router\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('app')\n);\n```\n\n## Development\n\n```\nyarn install\nyarn eslint\nyarn eslint:fix\nyarn test\n```\n\n## CI and autopublish\n\nOn Circle CI you need to add `NPM_TOKEN` which has rights to publish package to npmjs.org.\n\nAlso when you provide `SLACK_TOKENS` redux-preload/YYY/ZZZZ\n(take them as one string from url `https://hooks.slack.com/services/redux-preload/YYY/ZZZ`)\nit will let you know about new version.\n\nWhen code gets to master branch, it will try to publish,\nso if version in package.json is different, it will push it automatically.\n\n## Made with love by\n[![](https://camo.githubusercontent.com/d88ee6842f3ff2be96d11488aa0d878793aa67cd/68747470733a2f2f7777772e676f6f676c652e636f6d2f612f626c75656265727279617070732e636f6d2f696d616765732f6c6f676f2e676966)](https://www.blueberry.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueberryapps%2Fredux-preload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblueberryapps%2Fredux-preload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueberryapps%2Fredux-preload/lists"}