{"id":15906343,"url":"https://github.com/atellmer/react-spawn-x","last_synced_at":"2025-08-11T21:40:21.545Z","repository":{"id":57345114,"uuid":"83307418","full_name":"atellmer/react-spawn-x","owner":"atellmer","description":"React connector for spawn-x","archived":false,"fork":false,"pushed_at":"2017-03-17T11:17:40.000Z","size":43,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-08T18:07:18.433Z","etag":null,"topics":["flux","javascript","mobx","observer","react","reactive","redux","rxjs","state","store","zone"],"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/atellmer.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-02-27T12:22:59.000Z","updated_at":"2017-03-04T14:31:59.000Z","dependencies_parsed_at":"2022-09-16T18:11:48.298Z","dependency_job_id":null,"html_url":"https://github.com/atellmer/react-spawn-x","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/atellmer/react-spawn-x","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atellmer%2Freact-spawn-x","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atellmer%2Freact-spawn-x/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atellmer%2Freact-spawn-x/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atellmer%2Freact-spawn-x/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atellmer","download_url":"https://codeload.github.com/atellmer/react-spawn-x/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atellmer%2Freact-spawn-x/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269962764,"owners_count":24504284,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["flux","javascript","mobx","observer","react","reactive","redux","rxjs","state","store","zone"],"created_at":"2024-10-06T13:22:41.804Z","updated_at":"2025-08-11T21:40:21.484Z","avatar_url":"https://github.com/atellmer.png","language":"JavaScript","readme":"# react-spawn-x\n### React connector for [spawn-x](https://github.com/atellmer/spawn-x).\n\n\n## install\nWith npm:\n```\nnpm install spawn-x react-spawn-x --save\n```\nWith yarn:\n```\nyarn add spawn-x react-spawn-x\n```\n\n## Usage\n#### app/index.js\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './containers/App';\n\n\nReactDOM.render(\n  \u003cApp/\u003e,\n  document.getElementById('root')\n);\n```\n\n#### app/store/index.js\n```javascript\nimport { createStore, addInterceptor } from 'spawn-x';\n\n\nconst initialState = {\n  users: [],\n  some: {\n    text: 'Hello World'\n  },\n  parent: {\n    child: 'I am child'\n  }\n}\n\nconst store = createStore(\n  initialState,\n  addInterceptor(logger)\n);\n\nfunction logger(store) {\n  return next =\u003e action =\u003e {\n    next(action);\n    console.log('action: ', action.type + ' -\u003e ', action.data);\n  }\n}\n\nexport {\n  store\n}\n```\n#### app/actions/user.js\n```javascript\nimport { store } from '../store';\n\n\nconst addUser = user =\u003e {\n  store.update('users', {\n    data: store.select('users').concat(user),\n    type: 'ADD_NEW_USER'\n  });\n};\n\nexport {\n  addUser\n}\n```\n\n#### app/containers/App.js\n```javascript\nimport React, { Component } from 'react';\nimport { connect } from 'react-spawn-x';\n\nimport { store } from '../store';\nimport { addUser } from '../actions/user';\nimport MyPresenterComponent from '../components/Presenter';\n\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cMyPresenterComponent\n          users={this.props.users}\n          text={this.props.text}\n          data={this.props.data}\n          addUser={addUser}/\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\n//our selection from state (for data we apply specific selector. It's just for example)\nconst selection = {\n  users: 'users',\n  text: 'some.text',\n  data: ['parent.child', state =\u003e state.parent.child]\n};\n\n//wrap App component\nexport default connect(store)(selection)(App);\n```\n\n#### app/components/Presenter.js\n```javascript\nimport React, { Component } from 'react';\n\n\nclass MyPresenter extends Component {\n\n  handleSubmit = (ev) =\u003e {\n    ev.preventDefault();\n\n    console.log('some text from state: ', this.props.text);\n    console.log('some data from state: ', this.props.data);\n\n    this.props.addUser({\n      name: ev.target.name.value,\n      age: ev.target.age.value\n    });\n\n    ev.target.name.value = '';\n    ev.target.age.value = '';\n  }\n\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eUser List\u003c/h1\u003e\n        \u003cul\u003e\n          {this.props.users.map((user, index) =\u003e {\n            return \u003cli key={index}\u003ename: {user.name} age: {user.age}\u003c/li\u003e\n          })}\n        \u003c/ul\u003e\n        \u003cform onSubmit={this.handleSubmit}\u003e\n          \u003cinput type=\"text\" name=\"name\"/\u003e\n          \u003cinput type=\"number\" name=\"age\"/\u003e\n          \u003cbutton type=\"submit\"\u003eAdd New User\u003c/button\u003e\n        \u003c/form\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nexport default MyPresenter;\n```\n\n## LICENSE\n\nMIT © [Alex Plex](https://github.com/atellmer)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatellmer%2Freact-spawn-x","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatellmer%2Freact-spawn-x","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatellmer%2Freact-spawn-x/lists"}