{"id":15753583,"url":"https://github.com/marella/react-redux-async","last_synced_at":"2025-03-31T07:42:17.150Z","repository":{"id":57343169,"uuid":"98130169","full_name":"marella/react-redux-async","owner":"marella","description":"Load react components and redux reducers asynchronously. Useful for code splitting and lazy loading.","archived":false,"fork":false,"pushed_at":"2017-07-23T23:07:46.000Z","size":5,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-08T15:04:00.654Z","etag":null,"topics":["async","async-components","async-reducers","code-splitting","lazy-loading","react","redux"],"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/marella.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-07-23T22:52:14.000Z","updated_at":"2018-04-26T20:02:16.000Z","dependencies_parsed_at":"2022-09-17T06:21:07.232Z","dependency_job_id":null,"html_url":"https://github.com/marella/react-redux-async","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Freact-redux-async","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Freact-redux-async/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Freact-redux-async/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marella%2Freact-redux-async/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marella","download_url":"https://codeload.github.com/marella/react-redux-async/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246436052,"owners_count":20776960,"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":["async","async-components","async-reducers","code-splitting","lazy-loading","react","redux"],"created_at":"2024-10-04T07:41:19.053Z","updated_at":"2025-03-31T07:42:17.128Z","avatar_url":"https://github.com/marella.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-redux-async\n\nLoad react components and redux reducers asynchronously. Useful for code splitting and lazy loading.\n\n\n\u003c!-- TOC depthFrom:2 depthTo:3 withLinks:1 updateOnSave:1 orderedList:0 --\u003e\n\n- [Installation](#installation)\n- [Example](#example)\n- [Documentation](#documentation)\n\t- [API](#api)\n\t- [React Router](#react-router)\n\t- [Preload](#preload)\n- [License](#license)\n\n\u003c!-- /TOC --\u003e\n\n\n## Installation\n\n```bash\nnpm install react-redux-async --save\n```\n\n\n## Example\n\n\u003e Most of these examples use [Functional Components] and ES6 syntax.\n\nLet's say you have a component `MyComponent`:\n\n*App.js*\n\n```js\nimport React from 'react'\nimport MyComponent from './MyComponent'\n\nexport default () =\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n    \u003cMyComponent /\u003e\n  \u003c/div\u003e\n```\n\nTo load `MyComponent` asynchronously:\n\n*App.js*\n\n```diff\nimport React from 'react'\n-import MyComponent from './MyComponent'\n+import Async from 'react-redux-async'\n\nexport default () =\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n-   \u003cMyComponent /\u003e\n+   \u003cAsync load={() =\u003e import('./MyComponent')} /\u003e\n  \u003c/div\u003e\n```\n\n`MyComponent` will automatically render after it is loaded. Alternatively you can also create a separate \"async component\":\n\n*MyAsyncComponent.js*\n\n```js\nimport React from 'react'\nimport Async from 'react-redux-async'\n\nexport default () =\u003e \u003cAsync load={() =\u003e import('./MyComponent')} /\u003e\n```\n\nNow you can use this async component like a normal component:\n\n*App.js*\n\n```js\nimport React from 'react'\nimport MyAsyncComponent from './MyAsyncComponent'\n\nexport default () =\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n    \u003cMyAsyncComponent /\u003e\n  \u003c/div\u003e\n```\n\nYou can also load redux reducers asynchronously. Redux `store` is passed as the first argument to `load` function:\n\n*MyAsyncComponent.js*\n\n```js\nimport React from 'react'\nimport Async from 'react-redux-async'\n\nexport default () =\u003e {\n  const load = async store =\u003e {\n    // Load your component asynchronously\n    // but don't \"wait\" for it to load.\n    const component = import('./MyComponent')\n\n    // Load your reducer(s) asynchronously\n    // and \"wait\" for them to load.\n    const reducer = await import('./reducer')\n\n    // TODO: Here use store.replaceReducer() to add the new reducer(s).\n\n    // \"Wait\" for the component to load.\n    // This way both component and reducer(s) can be loaded in parallel.\n    return await component\n  }\n\n  return \u003cAsync load={load} /\u003e\n}\n```\n\n\n## Documentation\n\n### API\n\n#### `children: node` - Loading State\n\nYou can pass a loader/spinner through `children` which will be rendered before the component is loaded (promise returned by `load` function is resolved).\n\n```js\nimport React from 'react'\nimport Async from 'react-redux-async'\n\nexport default () =\u003e\n  \u003cAsync load={() =\u003e import('./MyComponent')}\u003e\n    \u003cdiv\u003eLoading...\u003c/div\u003e\n  \u003c/Async\u003e\n```\n\n#### `load: func`\n\nA function that should return a promise like [`import()`][import()]. The promise should return a module object or component when resolved. `load` function will be called only after `Async` has mounted.\n\n\u003e **NOTE:** If you want to support older browsers that lack Promise support, you'll need to include a Promise polyfill.\n\nWhen `store` is available through `props` or [`context`][context], it will be passed as the first argument to `load` function. You can use it to add reducers dynamically to store. See previous examples.\n\n#### `props: object`\n\n`props` that should be passed to the component that will be loaded.\n\n```js\nimport React from 'react'\nimport Async from 'react-redux-async'\n\nexport default (props) =\u003e\n  \u003cAsync load={() =\u003e import('./MyComponent')} props={props} /\u003e\n```\n\nNow you can pass `props` to the async component as if you were passing them to the actual component.\n\n```js\n\u003cMyAsyncComponent foo=\"bar\" /\u003e // \u003cMyComponent foo=\"bar\" /\u003e\n```\n\n#### `render: func`\n\nA function to render the loaded component. Loaded component will be passed as the first argument. Return value of the `render` function will be rendered.\n\n```js\nimport React from 'react'\nimport Async from 'react-redux-async'\n\nexport default (props) =\u003e\n  \u003cAsync\n    load={() =\u003e import('./MyComponent')}\n    render={MyComponent =\u003e \u003cMyComponent {...props} /\u003e}\n  /\u003e\n```\n\n### React Router\n\nSince `load` function will be called only after `Async` has mounted, you can use it with [react-router] v4 to lazy load components:\n\n```js\nimport React from 'react'\nimport { Route } from 'react-router'\nimport MyAsyncComponent from './MyAsyncComponent'\n\nexport default () =\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n    \u003cRoute path=\"/foo\" component={MyAsyncComponent} /\u003e\n  \u003c/div\u003e\n```\n\nHere `MyComponent` is loaded by `MyAsyncComponent` only when URL path matches `'/foo'`.\n\n### Preload\n\nYou can preload a component without rendering it by returning `null` in `render` function of `Async`:\n\n*App.js*\n\n```js\nimport React from 'react'\nimport { Route } from 'react-router'\nimport MyAsyncComponent from './MyAsyncComponent'\n\nexport default () =\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eMy App\u003c/h1\u003e\n    \u003cMyAsyncComponent render={() =\u003e null} /\u003e\n    \u003cRoute path=\"/foo\" component={MyAsyncComponent} /\u003e\n  \u003c/div\u003e\n```\n\nYou should pass the `render` function to `Async`:\n\n*MyAsyncComponent.js*\n\n```js\nimport React from 'react'\nimport Async from 'react-redux-async'\n\nexport default ({ render }) =\u003e\n  \u003cAsync load={() =\u003e import('./MyComponent')} render={render} /\u003e\n```\n\nHere `MyAsyncComponent` will start loading `MyComponent` as soon as `App` is rendered. But `MyComponent` will not be rendered until the URL path matches `'/foo'`.\n\nPassing `null` or `undefined` to `render` will not have any effect and the loaded component will be rendered normally.\n\n\n## License\n\n[MIT][license]\n\n\n[license]: /LICENSE\n[Functional Components]: https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components\n[context]: https://facebook.github.io/react/docs/context.html\n[react-router]: https://github.com/ReactTraining/react-router\n[import()]: https://webpack.js.org/api/module-methods/#import-\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarella%2Freact-redux-async","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarella%2Freact-redux-async","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarella%2Freact-redux-async/lists"}