{"id":20023890,"url":"https://github.com/bertho-zero/mobx-async-connect","last_synced_at":"2025-05-05T02:30:51.037Z","repository":{"id":57299593,"uuid":"63684558","full_name":"bertho-zero/mobx-async-connect","owner":"bertho-zero","description":null,"archived":false,"fork":false,"pushed_at":"2016-07-24T00:08:46.000Z","size":10,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-23T08:51:20.842Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bertho-zero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-19T10:28:09.000Z","updated_at":"2020-09-23T15:28:22.000Z","dependencies_parsed_at":"2022-08-26T20:24:34.398Z","dependency_job_id":null,"html_url":"https://github.com/bertho-zero/mobx-async-connect","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/bertho-zero%2Fmobx-async-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bertho-zero%2Fmobx-async-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bertho-zero%2Fmobx-async-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bertho-zero%2Fmobx-async-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bertho-zero","download_url":"https://codeload.github.com/bertho-zero/mobx-async-connect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252427670,"owners_count":21746258,"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":[],"created_at":"2024-11-13T08:48:33.209Z","updated_at":"2025-05-05T02:30:50.749Z","avatar_url":"https://github.com/bertho-zero.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mobx-async-connect\nHow do you usually request data and store it to mobx store?\nYou create actions that do async jobs to load data, create store to save this data to mobx state,\nthen connect data to your component or container.\n\nUsually it's very similar routine tasks.\n\nAlso, usually we want data to be preloaded. Especially if you're building universal app,\nor you just want pages to be solid, don't jump when data was loaded.\n\nThis package consist of 2 parts: one part allows you to delay containers rendering until some async actions are happening.\nAnother stores your data to mobx store and connect your loaded data to your container.\n\n## Notice\n\nThis is a fork, merge and refactor of [redux-async-connect](https://github.com/Rezonans/redux-async-connect) and [redux-connect](https://github.com/makeomatic/redux-connect) for Mobx.\n\n## Installation \u0026 Usage\n\nUsing [npm](https://www.npmjs.com/):\n\n`$ npm install mobx-async-connect -S`\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Provider } from 'mobx-react';\nimport { browserHistory, Router, Route } from 'react-router';\nimport { MobxAsyncConnect, asyncConnect, store as mobxAsyncConnect } from 'mobx-async-connect';\n\n// 1. Connect your data, similar to mobx-react @inject\n@asyncConnect([{\n  key: 'lunch',\n  promise: ({ store, location, params }) =\u003e Promise.resolve({ id: 1, name: 'Borsch' })\n}])\nclass App extends React.Component {\n  render() {\n    // 2. access data as props\n    const lunch = this.props.lunch\n    return (\n      \u003cdiv\u003e{lunch.name}\u003c/div\u003e\n    );\n  }\n}\n\n// 3. Connect mobx async store\nconst initialState = window.__data || null;\nconst store = {\n  mobxAsyncConnect: new mobxAsyncConnect(initialState \u0026\u0026 initialState.mobxAsyncConnect || undefined)\n};\n\n// 4. Render `Router` with MobxAsyncConnect middleware\nrender((\n  \u003cProvider {...store}\u003e\n    \u003cRouter render={props =\u003e \u003cMobxAsyncConnect {...props} filter={item =\u003e !item.deferred} /\u003e} history={browserHistory}\u003e\n      \u003cRoute path=\"/\" component={App}/\u003e\n    \u003c/Router\u003e\n  \u003c/Provider\u003e\n), el);\n```\n\n### Server\n\n```js\nimport { renderToString } from 'react-dom/server';\nimport { match } from 'react-router';\nimport { Provider } from 'mobx-react';\nimport { MobxAsyncConnect, loadOnServer, store as mobxAsyncConnect } from 'mobx-async-connect';\nimport createHistory from 'react-router/lib/createMemoryHistory';\nimport serialize from 'serialize-javascript';\n\napp.get('*', (req, res) =\u003e {\n  const store = {\n    mobxAsyncConnect: new mobxAsyncConnect()\n  };\n\n  match({ history, routes, location: req.url }, (err, redirect, renderProps) =\u003e {\n\n    // 1. load data\n    loadOnServer({ ...renderProps, store }).then(() =\u003e {\n\n      // 2. use `MobxAsyncConnect` instead of `RouterContext` and pass it `renderProps`\n      const appHTML = renderToString(\n        \u003cProvider {...store}\u003e\n          \u003cMobxAsyncConnect {...renderProps} /\u003e\n        \u003c/Provider\u003e\n      );\n\n      // 3. render the Mobx initial data into the server markup\n      const html = createPage(appHTML, store);\n      res.send(html);\n    });\n  });\n});\n\nfunction createPage(html, store) {\n  return `\n    \u003c!doctype html\u003e\n    \u003chtml\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e${html}\u003c/div\u003e\n\n        \u003c!-- its a Mobx initial data --\u003e\n        \u003cscript dangerouslySetInnerHTML={{__html: `window.__data=${serialize(store)};`}} charSet=\"UTF-8\"/\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `;\n}\n```\n\n## API\n\n\nBy default `render` props of the `MobxAsyncConnect` component is:\n\n```js\nconst render = props =\u003e \u003cRouterContext {...props} /\u003e;\n```\n\n##\n\nAll additionnals 'parameters' (eg: helpers, data fetcher) added to props of `MobxAsyncConnect` component(s) are accessible in promise options, beside `store`, `location`, `params` and others.\n\nNote: For universal application it is highly recommended to have the same client-side props than server side.\n\n## Contributors\n- [Kévin Berthommier](https://github.com/bertho-zero)\n\n## Collaboration\nYou're welcome to PR, and we appreciate any questions or issues, please [open an issue](https://github.com/bertho-zero/mobx-async-connect/issues)!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbertho-zero%2Fmobx-async-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbertho-zero%2Fmobx-async-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbertho-zero%2Fmobx-async-connect/lists"}