Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix #103. update dependencies #104

Merged
merged 6 commits into from
Jan 13, 2022
Merged

fix #103. update dependencies #104

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e300d58
fix #103. update dependencies
james-anderson-iu Dec 14, 2021
41f3fda
PR updates
james-anderson-iu Dec 17, 2021
359df44
PR update
james-anderson-iu Dec 17, 2021
d189243
PR update. combine rxjs imports into one line per file
james-anderson-iu Dec 17, 2021
f9bd276
PR update. fix imports in non-CHANGLOG ".md" files
james-anderson-iu Dec 17, 2021
994479b
PR updates. fix examples. update CHANGELOG
james-anderson-iu Jan 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ dist
bundles
.DS_Store
lerna-debug.log
npm-debug.log
npm-debug.log
package-lock.json
23 changes: 9 additions & 14 deletions examples/intro-to-rxjs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ Static operators (otherwise known as a producers) are used to initiate observabl
In RxJS v6, static operators and pipeable operators are imported from different locations.

```js
import { combineLatest, from, merge, of } from 'rxjs'
import { distinctUntilChanged, filter, map, mapTo, mergeMap } from 'rxjs/operators'
import { combineLatest, distinctUntilChanged, filter, from, map, mapTo, merge, mergeMap, of } from 'rxjs'
```

## Custom operators
Expand All @@ -58,13 +57,13 @@ If there's an operator configuration or sequence that is often used, it is now e

```js
// operators.js
import { distinctUntilChanged } from 'rxjs/operators'
import { distinctUntilChanged } from 'rxjs'

export const distinctUntilObjectChanged = () => (source) =>
source.pipe(distinctUntilChanged(null, (value) => JSON.stringify(value)))

// app.js
import { of } from 'rxjs/operators'
import { of } from 'rxjs'
import { distinctUntilObjectChanged } from './operators'

of(
Expand Down Expand Up @@ -93,8 +92,7 @@ If needing to do any work outside of the stream, the best places to do that is w
If wanting to inspect the values emitted at different stages in a stream, an easy way is to `log` the output. It may be tempting to inject these calls within other operations, but ultimately, it starts to uncomfortably intertwine temporary debug code with app code.

```js
import { interval } from 'rxjs'
import { map } from 'rxjs/operators'
import { interval, map } from 'rxjs'

interval(1000).pipe(
map((i) => {
Expand All @@ -108,8 +106,7 @@ interval(1000).pipe(
Instead, isolate these side effects in the `tap` operator, as it only inspects input and never modifies its output.

```js
import { interval } from 'rxjs'
import { map, tap } from 'rxjs/operators'
import { interval, map, tap } from 'rxjs'

interval(1000).pipe(
map((i) => i * 2),
Expand All @@ -120,8 +117,7 @@ interval(1000).pipe(
If wanting to simplify this even more, consider using the [`rxjs-console-logger`](https://github.com/donaldaverill/rxjs-console-logger-operator) package or creating a custom operator.

```js
import { interval } from 'rxjs'
import { map } from 'rxjs/operators'
import { interval, map } from 'rxjs'
import { debug } from 'rxjs-console-logger'

interval(1000).pipe(
Expand All @@ -133,8 +129,7 @@ interval(1000).pipe(
Remember to always subscribe to a stream. Otherwise, no operators will ever be executed.

```js
import { interval } from 'rxjs'
import { map } from 'rxjs/operators'
import { interval, map } from 'rxjs'
import { debug } from 'rxjs-console-logger'

interval(1000).pipe(
Expand Down Expand Up @@ -195,7 +190,7 @@ e$ | f$ |
In order to ensure the work by `d$` occurs only once, its value needs to be explicitly shared with `e$` and `f$`. To do this, use the `share` operator as the last operatation on `d$`. A stream that behaves this way is commonly called a *hot observable*.

```js
import { share, skip } from 'rxjs/operators'
import { share, skip } from 'rxjs'

const d$ = c$.pipe(
skip(3),
Expand All @@ -208,7 +203,7 @@ const d$ = c$.pipe(
In order to ensure late subscribers like `f$` receive the latest value as soon as they subscribe, use `shareReplay(1)` rather than `share`. The first argument is the number of values remembered and shared by `d$`. In most cases, only one (the latest) is needed.

```js
import { shareReplay, skip } from 'rxjs/operators'
import { shareReplay, skip } from 'rxjs'

const d$ = c$.pipe(
skip(3),
Expand Down
2 changes: 1 addition & 1 deletion examples/timer/.babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"presets": ["env", "react"]
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
15 changes: 5 additions & 10 deletions examples/timer/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,7 @@ map {0}-{1}-{2}-{3}--...
```jsx
import React from 'react'
import { render } from 'react-dom'
import { interval } from 'rxjs'
import { map, startWith } from 'rxjs/operators'
import { interval, map, startWith } from 'rxjs'

class Timer extends React.Component {
constructor (props) {
Expand Down Expand Up @@ -138,8 +137,7 @@ Let's take the component and abstract it into a [higher-order component factory]
```jsx
import React from 'react'
import { render } from 'react-dom'
import { interval } from 'rxjs'
import { map, startWith } from 'rxjs/operators'
import { interval, map, startWith } from 'rxjs'

function connect (WrappedComponent, state$) {
return class Connect extends React.Component {
Expand Down Expand Up @@ -187,8 +185,7 @@ Rather than providing your own higher-order component factory, you can use the `
```jsx
import React from 'react'
import { render } from 'react-dom'
import { interval } from 'rxjs'
import { map, startWith } from 'rxjs/operators'
import { interval, map, startWith } from 'rxjs'
import { connect } from 'conduit-rxjs-react'

const timerState$ = interval(1000).pipe(
Expand All @@ -215,8 +212,7 @@ Perhaps you want to create several timers, each with different starting times an
```jsx
import React from 'react'
import { render } from 'react-dom'
import { interval } from 'rxjs'
import { map, startWith } from 'rxjs/operators'
import { interval, map, startWith } from 'rxjs'
import { connect } from 'conduit-rxjs-react'

function createTimer (config = {}) {
Expand Down Expand Up @@ -256,8 +252,7 @@ Instead of manually creating several instances of the same connected component,
```js
import React from 'react'
import { render } from 'react-dom'
import { interval } from 'rxjs'
import { map, startWith, switchMap } from 'rxjs/operators'
import { interval, map, startWith, switchMap } from 'rxjs'
import { connect } from 'conduit-rxjs-react'

function createTimer () {
Expand Down
Loading