{"id":19505939,"url":"https://github.com/morlay/reflux-connect","last_synced_at":"2025-04-26T02:32:13.134Z","repository":{"id":57352140,"uuid":"46411134","full_name":"morlay/reflux-connect","owner":"morlay","description":null,"archived":false,"fork":false,"pushed_at":"2016-04-06T03:50:17.000Z","size":14,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T23:11:27.981Z","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/morlay.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":"2015-11-18T10:18:13.000Z","updated_at":"2017-12-18T10:22:22.000Z","dependencies_parsed_at":"2022-09-14T19:20:19.440Z","dependency_job_id":null,"html_url":"https://github.com/morlay/reflux-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/morlay%2Freflux-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morlay%2Freflux-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morlay%2Freflux-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morlay%2Freflux-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morlay","download_url":"https://codeload.github.com/morlay/reflux-connect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250922127,"owners_count":21508279,"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-10T22:35:03.939Z","updated_at":"2025-04-26T02:32:12.864Z","avatar_url":"https://github.com/morlay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Reflux connect\n\n[Higher order Components](http://jamesknelson.com/structuring-react-applications-higher-order-components/) creator for [Reflux](https://github.com/reflux/refluxjs)\n\n[![Build Status](https://img.shields.io/travis/morlay/reflux-connect.svg?style=flat-square)](https://travis-ci.org/morlay/reflux-connect)\n[![Coverage](https://img.shields.io/coveralls/morlay/reflux-connect.svg?style=flat-square)](https://coveralls.io/r/morlay/reflux-connect)\n[![NPM](https://img.shields.io/npm/v/reflux-connect.svg?style=flat-square)](https://npmjs.org/package/reflux-connect)\n[![Dependencies](https://img.shields.io/david/morlay/reflux-connect.svg?style=flat-square)](https://david-dm.org/morlay/reflux-connect)\n[![License](https://img.shields.io/npm/l/reflux-connect.svg?style=flat-square)](https://npmjs.org/package/reflux-connect)\n\n### Usages\n\n#### Actions \u0026 Stores\n\nOnly support the `Reflux.connect` way, actions will be the same, but stores should be use as reflux.connect,\nsee more \u003chttps://github.com/reflux/refluxjs#using-refluxconnect\u003e\n\n#### Components\n\n```js\nimport React from 'react';\nimport refluxConnect from 'reflux-connect';\n\nimport storeA from '../stores/storeA';\nimport storeB from '../stores/storeB';\nimport commonActions from '../actions/commonActions';\n\nconst componentConnect = refluxConnect({\n  storeA: storeA,\n  storeB: storeB   \n})((state) =\u003e {\n  return {\n    storeA: state.storeA,\n    storeB: state.storeB   \n  }\n}, {\n  fetchData: commonActions.fetchData\n});\n\nclass Component extends React.Component {\n  static propTypes = {\n    storeA: React.PropTypes.object\n    storeB: React.PropTypes.object\n    fetchData: React.PropTypes.func.isRequired\n  }\n  \n  render() {\n    return null;\n  }\n}\n\nexport default componentConnect(Component)\n\n```\n\n#### `refluxConnect` Details\n \n`refluxConnect(stateKeyMap)([mapStateToProps], [mapActionsToProps], [mergeProps], [options])`\n\nsame design as \u003chttps://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options\u003e\n\nConnects a React component to reflux stores and actions.\n\nIt does not modify the component class passed to it.\nInstead, it returns a new, connected component class, for you to use.\n\nHowever, we should create a stateKeyMap for the connect state.\nOnce we created the stateKeyMap, the Component will be subscribed to the related stores.\n\n##### Arguments:\n\n`[mapStateToProps(state, [ownProps]): stateProps] (Function)`: \nIf specified, the component will subscribe to reflux stores updates. \nAny time it updates, mapStateToProps will be called. \nIts result must be a plain object, and it will be merged into the component’s props. \nIf ownProps is specified as a second argument, its value will be the properties passed to your component, \nand mapStateToProps will be re-invoked whenever the component receives new props.\nIf you omit it, will return the created state object.\n\n`[mapActionsToProps(state, [ownProps]): actionProps]` (Object or Function): \nIf an object is passed, each function inside it will be assumed to be an action creator. \nAn object with the same function names, will be merged into the component’s props. \nIf a function is passed, it will be given dispatch.\n It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way. \nIf you omit it, will return empty object.\n\n`[mergeProps(stateProps, actionProps, ownProps): props] (Function)`: \nIf specified, it is passed the result of mapStateToProps(), mapActionsToProps(), and the parent props. \nThe plain object you return from it will be passed as props to the wrapped component. \nYou may specify this function to select a slice of the state based on props, \nor to bind action creators to a particular variable from props. \nIf you omit it, `Object.assign({}, ownProps, stateProps, actionProps)` is used by default.\n\n`[options] (Object)` If specified, further customizes the behavior of the connector.\n\n`[pure = true] (Boolean)`: \nIf true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, \npreventing unnecessary updates, \nassuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected store’s state. \nDefaults to true.\n\n`[withRef = false] (Boolean)`: If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Defaults to false.\n\n\n##### Returns\n\n**Static Properties**\n\n* `WrappedComponent` (Component): The original component class passed to `connect()`.\n\n**Static Methods**\n\nAll the original static methods of the component are hoisted.\n\n**Instance Methods**\n\n`getWrappedInstance(): ReactComponent`\n\nReturns the wrapped component instance. Only available if you pass `{ withRef: true }` as part of the `connect()`’s fourth options argument.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorlay%2Freflux-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorlay%2Freflux-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorlay%2Freflux-connect/lists"}