{"id":13509165,"url":"https://github.com/acdlite/redux-rx","last_synced_at":"2025-04-09T07:05:30.444Z","repository":{"id":34529831,"uuid":"38472667","full_name":"acdlite/redux-rx","owner":"acdlite","description":"RxJS utilities for Redux.","archived":false,"fork":false,"pushed_at":"2016-01-24T16:42:10.000Z","size":21,"stargazers_count":1006,"open_issues_count":12,"forks_count":44,"subscribers_count":28,"default_branch":"master","last_synced_at":"2025-04-02T05:59:44.251Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/acdlite.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-07-03T04:56:42.000Z","updated_at":"2024-11-29T08:35:11.000Z","dependencies_parsed_at":"2022-08-31T06:10:30.378Z","dependency_job_id":null,"html_url":"https://github.com/acdlite/redux-rx","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdlite%2Fredux-rx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdlite%2Fredux-rx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdlite%2Fredux-rx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acdlite%2Fredux-rx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acdlite","download_url":"https://codeload.github.com/acdlite/redux-rx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994119,"owners_count":21030050,"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-08-01T02:01:03.890Z","updated_at":"2025-04-09T07:05:30.427Z","avatar_url":"https://github.com/acdlite.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","angular","Other Integrations","[Redux](https://github.com/gaearon/redux)","Marks"],"sub_categories":["RxJS","[React](http://facebook.github.io/react)","[React - A JavaScript library for building user interfaces](http://facebook.github.io/react)"],"readme":"redux-rx\n========\n\n[![build status](https://img.shields.io/travis/acdlite/redux-rx/master.svg?style=flat-square)](https://travis-ci.org/acdlite/redux-rx)\n[![npm version](https://img.shields.io/npm/v/redux-rx.svg?style=flat-square)](https://www.npmjs.com/package/redux-rx)\n\nRxJS utilities for Redux. Includes\n\n- A utility to create Connector-like smart components using RxJS sequences.\n  - A special version of `bindActionCreators()` that works with sequences.\n- An [FSA](https://github.com/acdlite/flux-standard-action)-compliant observable [middleware](https://github.com/gaearon/redux/blob/master/docs/middleware.md)\n- A utility to create a sequence of states from a Redux store.\n\n```js\nnpm install --save redux-rx rx\n```\n\n## Usage\n\n```js\nimport { createConnector } from 'redux-rx/react';\nimport { bindActionCreators, observableMiddleware, observableFromStore } from 'redux-rx';\n```\n\n## `createConnector(selectState, ?render)`\n\nThis lets you create Connector-like smart components using RxJS sequences. `selectState()` accepts three sequences as parameters\n\n- `props$` - A sequence of props passed from the owner\n- `state$` - A sequence of state from the Redux store\n- `dispatch$` - A sequence representing the `dispatch()` method. In real-world usage, this sequence only has a single value, but it's provided as a sequence for correctness.\n\n`selectState()` should return a sequence of props that can be passed to the child. This provides a great integration point for [sideways data-loading](https://github.com/facebook/react/issues/3398).\n\nHere's a simple example using web sockets:\n\n```js\nconst TodoConnector = createConnector((props$, state$, dispatch$) =\u003e {\n  // Special version of bindActionCreators that works with sequences; see below\n  const actionCreators$ = bindActionCreators(actionCreators, dispatch$);\n  const selectedState$ = state$.map(s =\u003e s.messages);\n\n  // Connect to a websocket using rx-dom\n  const $ws = fromWebSocket('ws://chat.foobar.org').map(e =\u003e e.data)\n    .withLatestFrom(actionCreators$, (message, ac) =\u003e\n      () =\u003e ac.receiveMessage(message)\n    )\n    .do(dispatchAction =\u003e dispatchAction()); // Dispatch action for new messages\n\n  return combineLatest(\n    props$, selectedState$, actionCreators$, $ws,\n    (props, selectedState, actionCreators) =\u003e ({\n      ...props,\n      ...selectedState,\n      ...actionCreators\n    }));\n});\n```\n\nPretty simple, right? Notice how there are no event handlers to clean up, no `componentWillReceiveProps()`, no `setState`. Everything is just a sequence.\n\nIf you're new to RxJS, this may look confusing at first, but — like React — if you give it a try you may be surprised by how simple and *fun* reactive programming can be.\n\n**TODO: React Router example. See [this comment](https://github.com/gaearon/redux/issues/227#issuecomment-119237073) for now.**\n\n`render()` is an optional second parameter which maps child props to a React element (vdom). This parameter can also be a React Component class — or, if you omit it entirely, a higher-order component is returned. See `createRxComponent()` of [react-rx-component](https://github.com/acdlite/react-rx-component) for more details. (This function is a wrapper around that library's `createRxComponent()`.)\n\nNot that unlike Redux's built-in Connector, the resulting component does not have a `select` prop. It is superseded by the `selectState` function described above. Internally, `shouldComponentUpdate()` is still used for performance.\n\n**NOTE** `createConnector()` is a wrapper around [react-rx-component](https://github.com/acdlite/react-rx-component). Check out that project for more information on how to use RxJS to construct smart components.\n\n### `bindActionCreators(actionCreators, dispatch$)`\n\nThis is the same, except `dispatch$` can be either a dispatch function *or* a sequence of dispatch functions. See previous section for context.\n\n### `observableMiddleware`\n\nThe middleware works on RxJS observables, and Flux Standard Actions whose payloads are observables.\n\nThe default export is a middleware function. If it receives a promise, it will dispatch the resolved value of the promise. It will not dispatch anything if the promise rejects.\n\nIf it receives an Flux Standard Action whose `payload` is an observable, it will\n\n- dispatch a new FSA for each value in the sequence.\n- dispatch an FSA on error.\n\nThe middleware does not subscribe to the passed observable. Rather, it returns the observable to the caller, which is responsible for creating a subscription. Dispatches occur as a side effect (implemented using `doOnNext()` and `doOnError()`).\n\n#### Example\n\n```js\n// fromEvent() used just for illustration. More likely, if you're using React,\n// you should use something rx-react's FuncSubject\n// https://github.com/fdecampredon/rx-react#funcsubject\nconst buttonClickStream = Observable.fromEvent(button, 'click');\n\n// Stream of new todos, with debouncing\nconst newTodoStream = buttonClickStream\n  .debounce(100)\n  .map(getTodoTextFromInput);\n\n// Dispatch new todos whenever they're created\ndispatch(newTodoStream).subscribe();\n```\n\n### `observableFromStore(store)`\n\nCreates an observable sequence of states from a Redux store.\n\nThis is a great way to react to state changes outside of the React render cycle. See [this discussion](https://github.com/gaearon/redux/issues/177#issuecomment-115389776) for an example. I'll update with a proper example once React Router 1.0 is released.\n\nAlso, I'm not a Cycle.js user, but I imagine this is useful for integrating Redux with that library.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facdlite%2Fredux-rx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facdlite%2Fredux-rx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facdlite%2Fredux-rx/lists"}