{"id":17677439,"url":"https://github.com/unadlib/react-iflow","last_synced_at":"2025-05-12T21:29:23.691Z","repository":{"id":86376725,"uuid":"98162693","full_name":"unadlib/react-iflow","owner":"unadlib","description":"Connector for React and iFlow.","archived":false,"fork":false,"pushed_at":"2018-01-28T17:33:15.000Z","size":198,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-26T16:46:08.892Z","etag":null,"topics":["iflow","react","react-native","state-connector","state-management"],"latest_commit_sha":null,"homepage":"","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/unadlib.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-24T07:35:04.000Z","updated_at":"2020-10-18T04:59:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ffe08a5-c64f-4ec9-985d-56f6144d64aa","html_url":"https://github.com/unadlib/react-iflow","commit_stats":{"total_commits":66,"total_committers":1,"mean_commits":66.0,"dds":0.0,"last_synced_commit":"a70d30a873c31b1b75d35833a7550f8f22c45e8f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freact-iflow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freact-iflow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freact-iflow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unadlib%2Freact-iflow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unadlib","download_url":"https://codeload.github.com/unadlib/react-iflow/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253824775,"owners_count":21970078,"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":["iflow","react","react-native","state-connector","state-management"],"created_at":"2024-10-24T07:28:41.878Z","updated_at":"2025-05-12T21:29:23.673Z","avatar_url":"https://github.com/unadlib.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React iFlow\n\nThe connector for React 🌈 iFlow state management.\n\n[![Travis](https://img.shields.io/travis/unadlib/react-iflow.svg)](https://travis-ci.org/unadlib/react-iflow)\n[![Coverage Status](https://coveralls.io/repos/github/unadlib/react-iflow/badge.svg?branch=master)](https://coveralls.io/github/unadlib/react-iflow?branch=master)\n[![npm](https://img.shields.io/npm/v/react-iflow.svg)](https://www.npmjs.com/package/react-iflow)\n\n\u003e **React iFlow** If you use React and iFlow to manage state, save all kinds of selectors cumbersome, while supporting a variety of user-defined store.\n\n\u003e 🔥🔥🔥**It is a highly efficient and concise React and iFlow store connector**🔥🔥🔥\n\n### Features and benefits\n* Least possible time selector\n* Automatic array diff\n* Full support comprehensive selector\n* Support immutable\n\n### Install\n```bash\nyarn add react-iflow\n//or\nnpm install --save react-iflow\n```\n### Getting started\nTo Edit\n### The Gist\n* `index.js`\n```javascript\nimport React, { Component } from 'react'\nimport ReactDOM from 'react-dom'\nimport Body from './body'\nReactDOM.render(\u003cBody/\u003e, document.getElementById('app'))\n```\n* `store.js`\n```javascript\nimport iFlow from 'iflow'\n\nconst pipe = iFlow({\n  calculate: function (number) {\n    this.counter += number\n  },\n  counter: 0,\n})\n\nconst store = pipe.create()\nexport default store\n```\n* `body.js`\n```javascript\nimport React, { Component } from 'react'\nimport flow from 'react-iflow'\nimport store from './store'\n\nclass Body extends Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e this.props.store.calculate(-1)}\u003e-\u003c/button\u003e\n        {this.props.store.counter}\n        \u003cbutton onClick={() =\u003e this.props.store.calculate(1)}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default flow(store)(Body)\n```\n### Examples\n[React with iFlow examples](https://github.com/unadlib/iflow/tree/master/examples)\n[Counter](https://jsfiddle.net/unadlib/03ukqj5L/1/)(Online)\n[TODO](https://jsfiddle.net/unadlib/6wabhdqp/)(Online)\n### API\n#### flow\nIt's the standard connector of iFlow store\n```javascript\nimport flow from 'react-iflow'\n```\n`flow` is higher-order function，and it supports the decorator's writing. **If the last one argument of the flow is `store`, then the connected store will take it precedence.** \n\n- **Selector**: In fact, in most cases, 🎉🎉🎉**you don't need to use selectors**🎉🎉🎉, because iFlow will automatically help you diff state to determine if the component is updated, unless you need to compute derived data.\n\n---\n- Higher-order functions\n```javascript\nclass CustomComponent extends Component {}\nflow(store)(CustomComponent)\n```\nIf use `Provider`, you don't need to pass the store argument, unless you need to set the selector.\n```javascript\nclass CustomComponent extends Component {}\nflow()(CustomComponent)\n```\nMore concise way\n```javascript\nimport { connect } from 'react-iflow'\nclass CustomComponent extends Component {}\nconnect(CustomComponent)\n```\n- Class decorator\n```javascript\n@flow()\nclass CustomComponent extends Component {}\n```\n\n- User-defined select node store\n```javascript\n@flow(store.count)\nclass CustomComponent extends Component {}\n```\n\n- With array selectors functions\n```javascript\n@flow([(state, props) =\u003e{\n  return {\n    ...props,\n    count: state.count,\n  }\n}],store)\nclass CustomComponent extends Component {}\n```\n\n- With arguments selectors functions\n```javascript\n@flow(\n  (state, props) =\u003e{\n    return {\n      ...props,\n      count: state.count,\n    }\n  },\n  (state, props) =\u003e{\n    return {\n      ...props,\n      counter: state.count.counter,\n    }\n  },\n  store\n)\nclass CustomComponent extends Component {}\n```\n\n#### provider\n```javascript\nimport { Provider } from 'react-iflow'\nReactDOM.render(\u003cProvider store={store}\u003e\u003cBody/\u003e\u003c/Provider\u003e, document.getElementById('app'))\n```\n- `Provider` depend on the react's `context` to complete the cross component transfer, and its role is exactly the same as react-redux's Provider if you are familiar with react-redux\n\n#### connect\n```javascript\nimport { connect } from 'react-iflow'\nclass CustomComponent extends Component {}\nconnect(CustomComponent)\n```\nWhen you call `Provider` inject store, you can use `connect` API to quickly connect store to the component, it's simple.\n\n#### immutable\n\n* Single-layer immutable store is effective when using immutable\n\n`@immutable`is a single-layer traversal props, so the mixed structure of the iFlow store and plain objects is invalid.\n  \nFor example:\n\n```javascript\nclass Parent extends Component {\n  // this.props.sub is iflow store\n  render() {\n    return \u003cSub store={this.props.sub} /\u003e\n  }\n}\n\n@immutable\nclass Sub extends Component {\n  // omit\n}\n```\n\nThis is effective. But the following example is not valid:\n \n ```javascript\nclass Parent extends Component {\n  // this.props.sub is iflow store\n  render() {\n    const store = {foo:'bar', sub: this.props.sub}\n    return \u003cSub store={store} /\u003e\n  }\n}\n\n@immutable\nclass Sub extends Component {\n  // omit\n}\n ```\n\nOf course, if you're not using `@immutable` You can arbitrarily pass the iFlow store.\n\n* About the Usage of PureComponent\n \nBecause the iFlow connector uses the mutable store by default, So the connector directly with the React.PureComponent connection will not be updated, iFlow connector corresponding component should be react.Component, do not worry, iFlow will automatically diff comparison, it is more efficient and automatic than the light comparison of React.PureComponent.\n\nIf you really need to use react.PureComponent, then it is recommended that you could use cooperatively with `@immutable`. This is a great help in Sub-Component performance optimization.\n \nFor example:\n\n```javascript\n@flow(store)\n@immutable\nclass Body extends PureComponent {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={() =\u003e this.props.store.calculate(-1)}\u003e-\u003c/button\u003e\n        {this.props.store.counter}\n        \u003cbutton onClick={() =\u003e this.props.store.calculate(1)}\u003e+\u003c/button\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n \n### License\n\n---\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funadlib%2Freact-iflow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funadlib%2Freact-iflow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funadlib%2Freact-iflow/lists"}