文件列表:

.babelrc (39, 2016-05-16)
.eslintignore (29, 2016-05-16)
.eslintrc (334, 2016-05-16)
.npmignore (19, 2016-05-16)
.travis.yml (39, 2016-05-16)
LICENSE (1082, 2016-05-16)
baconjs.js (158, 2016-05-16)
examples/ (0, 2016-05-16)
examples/01-bmi/ (0, 2016-05-16)
examples/01-bmi/.babelrc (48, 2016-05-16)
examples/01-bmi/bacon.js (1624, 2016-05-16)
examples/01-bmi/index.html (235, 2016-05-16)
examples/01-bmi/kefir.js (1725, 2016-05-16)
examples/01-bmi/package.json (906, 2016-05-16)
examples/01-bmi/rx.js (1691, 2016-05-16)
examples/02-todomvc/ (0, 2016-05-16)
examples/02-todomvc/.babelrc (48, 2016-05-16)
examples/02-todomvc/bacon.js (246, 2016-05-16)
examples/02-todomvc/index.html (385, 2016-05-16)
examples/02-todomvc/kefir.js (246, 2016-05-16)
examples/02-todomvc/package.json (969, 2016-05-16)
examples/02-todomvc/rx.js (240, 2016-05-16)
examples/02-todomvc/src/ (0, 2016-05-16)
examples/02-todomvc/src/bacon/ (0, 2016-05-16)
examples/02-todomvc/src/bacon/components/ (0, 2016-05-16)
examples/02-todomvc/src/bacon/components/footer.js (1285, 2016-05-16)
examples/02-todomvc/src/bacon/components/input.js (910, 2016-05-16)
examples/02-todomvc/src/bacon/components/list.js (1904, 2016-05-16)
examples/02-todomvc/src/bacon/components/toggleAll.js (673, 2016-05-16)
examples/02-todomvc/src/bacon/model.js (1715, 2016-05-16)
examples/02-todomvc/src/bacon/ui.js (610, 2016-05-16)
examples/02-todomvc/src/kefir/ (0, 2016-05-16)
examples/02-todomvc/src/kefir/components/ (0, 2016-05-16)
examples/02-todomvc/src/kefir/components/footer.js (1279, 2016-05-16)
examples/02-todomvc/src/kefir/components/input.js (905, 2016-05-16)
examples/02-todomvc/src/kefir/components/list.js (1886, 2016-05-16)
... ...

# React Combinators Seamless combination of React and reactive programming with (RxJs / Kefir / Bacon.js). [](http://badge.fury.io/js/react-combinators) [](https://travis-ci.org/milankinen/react-combinators) **THIS LIBRARY IS NOT MAINTAINED ANYMORE** If you are interested in doing applications with React and observables, please see: * [`calmm-js`](https://github.com/calmm-js) powerful toolset for state management and rendering with React and observables (Kefir & Bacon atm) * [`react.reactive`](https://github.com/milankinen/react-reactive-toolkit) calmm-js rendering part extracted and made streaming library agnostic ## Motivation Modeling your application state with observables gives you powerful tools for (async) state handling. However, combining those observables with React UIs has been a difficult: every observable must be subscribed and disposed separately with the component's lifecycle hooks. Such boilerplate! The goal of this project is to enable seamless combination of React and observable by introducing **React Observable Combinators**. Say hello to truly reactive and declarative React app development! ## Example Reddit post search implemented with combinators and `kefir` (counter example would have been too easy): ```javascript import React from "react" import Kefir from "kefir" import {Combinator} from "react-combinators/kefir" import {render} from "react-dom" // lets define our reactive Reddit state model, see Kefir // docs for more info about pools and other used methods function Reddit(initial) { const pool = Kefir.pool() const setReddit = reddit => pool.plug(Kefir.constant(reddit)) const reddit = pool.merge(Kefir.constant(initial)).toProperty() const posts = reddit .flatMapLatest(reddit => Kefir.fromPromise( fetch(`http://www.reddit.com/r/${reddit}.json`).then(req => req.json()) )) .map(json => json.data.children.map(({data}) => data)) .merge(Kefir.constant([])) // initial value .toProperty() const loading = reddit.map(() => true).merge(posts.map(() => false)).toProperty() // yes. the model is just a plain object with a set of actions // and reactive properties return { reddit, posts, loading, setReddit } } // no containers are needed! observables and combinators handle that the // UI syncs with the state function App({model}) { const { reddit, posts, loading, setReddit } = model // we can derive properties as well const loadingIndicator = loading.map(loading => loading ? : null) // all you need to do is to surround your JSX with element return (

Select Reddit: setReddit(e.target.value)}> /r/reactjs /r/javascript /r/ReactiveProgramming {loadingIndicator}

---

{posts.map(posts => posts.map(post => (
• {post.title}
)))}

) } const myReddit = Reddit("ReactiveProgramming") render(, document.getElementById("app")) ``` ## Installation npm i --save react react-combinators Currently supported FRP libraries are * `rx` * `baconjs` * `kefir` ## API All API functions and components are implemented for each supported FRP library and they are accessible through: ```javascript const {} = require("react-combinators/") ``` ### `` Higher order component that "wraps" the observables from its children and returns a virtual dom element that gets updated by changes in any of its child elements. Combinator components should be used at the top-level of your React component. Usage: ```javascript import {Combinator} from "react-combinators/" function MyApp(observable) { return ( My observable value: {observable} ) } ``` ### `combineVDOM` Higher order function that transforms a virtual dom tree containing observables to an observable that returns the same virtual dom where the observables are replaced with their values. Same as `combine*` functions in FRP libraries but this one is optimized for virtual dom. Usage (example with Bacon.js): ```javascript const a = Bacon.constant(10) const b = Bacon.constant(20) const vdom = combineVDOM(

{a} + {b} = {Bacon.combineWith(a, b, (a, b) => a + b)}

) console.log(vdom instanceof Bacon.Property) // => true ``` ### `createComponent` Creates a reactive component which wraps its observables into `React.Component`, hence it can be mixed with normal react components. `createComponent` takes one function which receives the component's properties as **observables** and returns an **observable containing the rendered virtual dom**. Signature: createComponent :: ({propsObservales} => Observable(VDOM)) => React.Component Usage (example with Bacon.js): ```javascript const Example = createComponent(({a, b}) => { const c = Bacon.combineWith(a, b, (a, b) => a + b) return combineVDOM(

{a} + {b} = {c}

) }) // ... somewhere in your app...

Example:

``` ## License MIT

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：