{"id":20674672,"url":"https://github.com/kesakiyo/redux-preloader","last_synced_at":"2025-04-19T20:27:20.537Z","repository":{"id":57351251,"uuid":"87060880","full_name":"kesakiyo/redux-preloader","owner":"kesakiyo","description":"A Higher Order Component that helps to initialize data.","archived":false,"fork":false,"pushed_at":"2018-07-04T11:42:23.000Z","size":43,"stargazers_count":14,"open_issues_count":1,"forks_count":2,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T13:01:27.382Z","etag":null,"topics":["initializer","javascript","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/kesakiyo.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-04-03T10:05:39.000Z","updated_at":"2019-07-05T05:05:38.000Z","dependencies_parsed_at":"2022-08-31T06:01:29.892Z","dependency_job_id":null,"html_url":"https://github.com/kesakiyo/redux-preloader","commit_stats":null,"previous_names":["zoyi/redux-preloader"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kesakiyo%2Fredux-preloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kesakiyo%2Fredux-preloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kesakiyo%2Fredux-preloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kesakiyo%2Fredux-preloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kesakiyo","download_url":"https://codeload.github.com/kesakiyo/redux-preloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249793977,"owners_count":21326638,"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":["initializer","javascript","react","redux"],"created_at":"2024-11-16T21:06:40.347Z","updated_at":"2025-04-19T20:27:20.514Z","avatar_url":"https://github.com/kesakiyo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-preloader\nA Higher Order Component that helps to initialize data.\n\n\n## Installation\n```npm install --save redux-preloader```\n\n## API\n### preLoader(config: Object)\n\n#### Config properties\n* `initializer(props, nextProps, dispatch) (type: Function, return: Bool)`: ```willMount```나 ```willReceiveProps```때 호출됩니다. 이 때 사용자는 ```props```, ```nextProps```를 통해 원하는 상황에서 액션을 생성할 수 있습니다. 때때로 액션을 생성한 뒤 Selector를 통하지 않고 명시적으로 LoadingComponent를 보여주고 싶을 수 있습니다. 이 때 ```initializer```함수에서 ```true```를 반환 한다면 명시적로 현재 컴포넌트를 Loading컴포넌트로 변경할 수 있습니다. 이 외의 경우에는 ```false```를 반환하시면 됩니다. (willMount 일때는 props가 null로 들어옵니다.)\n\n* `injectToProps (type: Object =\u003e [key: String, value: Function])`: preLoader에서 initializer가 호출 될 때 Store에서 추가로 내려받고 싶은 정보가 있을 수 있습니다. 이 때 원하는 정보들을 Object에 명시해주면 됩니다. \nObject의 key는 props로 내려줄 key를 의미합니다. Object의 value는 Selector function으로 Store에서 가져올 정보들을 의미합니다. 자세한 예제는 Example을 참고해주세요.\n\n* `isLoading(state, ownProps) (type: Function, return: Bool)`: LoadingComponent를 보여줄 상황을 결정하는 selector입니다. 해당 값이 true라면 LoadingComponent가 보여집니다. 기본 반환값은 false입니다.\n* `hasError(state, ownProps) (type: Function, return: Bool)`: ErrorComponent를 보여줄 상황을 결정하는 selector입니다. preLoading이 false일 경우 hasError를 판단합니다. 만약 preLoading이 항상 true라면 ErrorComponent가 render되는 일은 없습니다. 기본 반환값은 false입니다.\n\n* `LoadingComponent (type: Component)`: preLoading이 true일 때 render될 컴포넌트 입니다. 이 때 값으로는 컴포넌트 이름을 넘겨줘야 합니다.(\\\u003cError \\/\\\u003e 와 같은 형태가 아니라 Error 와 같은 형태) 만약 값을 넘겨주지 않는다면 빈 화면이 출력됩니다.\n\n* `ErrorComponent (type: Component or Function)`: hasError가 true일 때 render될 컴포넌트를 결정합니다. ```LoadingComponent```와 유사하게 동작합니다. 리액트 컴포넌트대신 함수를 넣는다면 argument로 props를 넘겨줍니다. 이 함수 내에서 render할 ErrorComponent를 결정할 수 있습니다. 만약 아무값도 넘기지 않는다면 빈 화면이 출력됩니다.\n\n* `wrapperDisplayName (type: String)`: 디버깅 할 때 표시될 display에 표시될 이름을 뜻합니다. 만약 값을 넘겨주지 않는다면 'withPreLoader'의 이름으로 표시됩니다.\n\n### createPreLoader(config: Object)\n\u003e 기본으로 제공해주는 preLoader를 사용하는것도 좋지만 좀 더 커스터마이징 된 preLoader를 사용하고 싶을때도 있습니다. 이 때 사용할 수 있는 API입니다.\n이 API는 몇 가지 기본 설정을 가진 preLoader를 생성하는 함수입니다.\n\n#### Config properties\n* `DefaultLoadingComponent (type: Component)`: preLoader에서 LoadingComponent를 정해주지 않는다면 isLoading이 true일 때 기본으로 사용하게 될 컴포넌트입니다.\n \n* `DefaultErrorComponent (type: Component)`: preLoader에서 ErrorComponent를 정해주지 않는다면 hasError가 true일 때 기본으로 사용하게 될 컴포넌트 입니다\n\n* `injectToProps (type: Object =\u003e [key: String, value: Function])`: preLoader에서 initializer가 호출 될 때 Store에서 추가로 내려받고 싶은 정보가 있을 수 있습니다. 이 때 원하는 정보들을 Object에 명시해주면 됩니다. \nObject의 key는 props로 내려줄 key를 의미합니다. Object의 value는 Selector function으로 Store에서 가져올 정보들을 의미합니다. 자세한 예제는 Example을 참고해주세요.\n\n## Example\n\n### es7 + decorator\n```javascript\nimport { preLoader } from 'redux-preloader'\n\nconst initializer = (props, nextProps, dispatch) =\u003e {\n  const id = selectn('id', props)\n  const nextId = selectn('id', nextProps)\n  if (id !== nextId) {\n    dispatch(/** Your async action **/)\n    return true\n  }\n  return false\n}\n\n@preLoader({\n  initializer,\n  isLoading: (state, ownProps) =\u003e state.isFetching,\n  hasError: (state, ownProps) =\u003e state.hasError,\n  LoadingComponent: YourLoadingComponent,\n  ErrorComponent: YourErrorComponent,\n})\nclass YourClass extends React.Component {\n  ...\n}\n\nexport default YourClass\n```\n\n### es6\n```javascript\nimport { preLoader } from 'redux-preloader'\n\nclass YourClass extends React.Component {\n  ...\n}\n\nconst initializer = (props, nextProps, dispatch) =\u003e {\n  const id = selectn('id', props)\n  const nextId = selectn('id', nextProps)\n  if (id !== nextId) {\n    dispatch(/** Your async action **/)\n    return true\n  }\n  return false\n}\n\nexport default preLoader({\n  initializer,\n  isLoading: (state, ownProps) =\u003e state.isFetching,\n  hasError: (state, ownProps) =\u003e state.hasError,\n  LoadingComponent: YourLoadingComponent,\n  ErrorComponent: YourErrorComponent,\n})(YourClass)\n```\n### createPreLoader + es7 + decorator\n```javascript\nimport { createPreLoader } from 'redux-prealoder'\n\nconst customPreLoader = createPreLoader({\n  DefaultLoadingComponent: YourDefaultLoadingComponent,\n  DefaultErrorComponent: YourDefaultErrorComponent,\n  injectToProps: {\n    socketStatus: (state, ownProps) =\u003e state.socketStatus\n  }\n})\n\nconst initializer = (props, nextProps, dispatch) =\u003e {\n  // injectToProps에 socketStatus를 명시해줘서 initializer에서 사용이 가능합니다\n  const status = selectn('socketStatus', props)\n  const nextStatus = selectn('socketStatus', nextProps)\n  if (status !== nextStatus) {\n    dispatch(/** Your async action **/)\n    return true\n  }\n  return false\n}\n\n/*\n  DefaultLoadingComponent, DefaultErrorComponent를 설정해 줬기 때문에\n  따로 설정을 안해줘도 원하는 컴포넌트가 보입니다.\n  만약 Default가 아닌 다른 컴포넌트를 보여주고 싶다면 다른 컴포넌트를 명시해주시면 됩니다.\n*/\n@customPreLoader({\n  initializer,\n  isLoading: (state, ownProps) =\u003e state.isFetching,\n  hasError: (state, ownProps) =\u003e state.hasError,\n})\nclass YourClass extends React.Component {\n  ...\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkesakiyo%2Fredux-preloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkesakiyo%2Fredux-preloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkesakiyo%2Fredux-preloader/lists"}