[Recompose] Compose Streams of React Props with Recompose’s compose and RxJS
2017-12-27 20:03
549 查看
Functions created with
In the example, we compose three things together, in order to create a powerful component.
1. We map user's click event to on increate and on decrease event streams.
2. We foward those count props to next stream 'loading', it will call ajax api to get Star Wars heros.
3. Last we create a typewriter to get a typing effect,
mapPropsStreamcanned be composed together to build up powerful streams. Bring in the
composehelper from Recompose then simply list your functions in the order you want the props to push through.
In the example, we compose three things together, in order to create a powerful component.
1. We map user's click event to on increate and on decrease event streams.
2. We foward those count props to next stream 'loading', it will call ajax api to get Star Wars heros.
3. Last we create a typewriter to get a typing effect,
const CounterWithPersonLoader = compose( count, load, typewriter )(Counter)
相关文章推荐
- [Recompose] Handle React Events as Streams with RxJS and Recompose
- [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
- [Recompose] Stream Props to React Children with RxJS
- [Recompose] Merge RxJS Button Event Streams to Build a React Counter Component
- [Recompose] Configure Recompose to Build React Components from RxJS Streams
- [Recompose] Stream a React Component from an Ajax Request with RxJS
- [Recompose] Make Reusable React Props Streams with Lenses
- [RxJS] Aggregating Streams With Reduce And Scan using RxJS
- [Angular2 Form] Use RxJS Streams with Angular 2 Forms
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- [Recompose] Pass a React Prop to a Stream in RxJS
- [React] Create a queue of Ajax requests with redux-observable and group the results.
- [RxJS] Handling Multiple Streams with Merge
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
- [RxJS] Replace zip with combineLatest when combining sources of data
- Creating Isomorphic Apps with Node.js, React, and Express
- [RxJS] Toggle A Stream On And Off With RxJS
- [RxJS] Sharing Streams with Share
- [Angular 2] Managing State in RxJS with StartWith and Scan
- [RxJS] Combining Streams with CombineLatest