irecord - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #go #machine-learning #deep-learning #macos #java #windows #awesome #kubernetes #pytorch #open-source

irecord

(★ 190)

An immutable store that exposes an RxJS observable. Great for React.

파일 탐색기

최종 버전 다운로드 (.zip)

- - basics.js
  - index.js
  - rx.js
  - stampit.js
- index.js
- index.js.map
- index.js
- basics.js
- index.js
- rx.js
- stampit.js
.eslintrc
.gitignore
.travis.yml
LICENSE
package.json
reactive-programming.md
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ericelliott/irecord

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd irecord

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

$ npm install --save irecord

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# irecord [![Build Status](https://travis-ci.org/ericelliott/irecord.svg?branch=master)](https://travis-ci.org/ericelliott/irecord)

An immutable object map that exposes an RxJS observable.

Written for the [Learn JavaScript with Eric Elliott](https://ericelliottjs.com/) online JavaScript course series.

## Status - DEPRECATED - try [lenses](https://medium.com/javascript-scene/lenses-b85976cb0534) or [transducers](https://medium.com/javascript-scene/transducers-efficient-data-processing-pipelines-in-javascript-7985330fe73d) instead.

This project was an experiment and is no longer under active development.

## Wait, what is this thing?

Imagine a JavaScript object that just stores data. Now imagine that every time you change that object, the object emits a change event. Yeah, kindof like Backbone models, but different.

## What is reactive programming?

The concept of reactive programming, and more specifically, how it differs from event listeners and the observer pattern is sometimes hard for beginners. [Resources that might help](./reactive-programming.md).

### How is it different?

When you change the value of a key, the previous value doesn't get erased. Instead, it gets added to a history. Every time you make a change, the new object state and the previous object state get emitted with the change event.

In other words, you can very easily compare the two objects if you need to see what changed. In fact, if you set a property to the same value as the previous value, no change event gets emitted at all.

### What's this RxJS thing?

Instead of subscribing to change events with `.on()`, you could use the RxJS `.subscribe()` method. Maybe later we'll add lots of other neat capabilities that RxJS makes possible.

### Why would I want to use this with React?

Pretty simple really, it makes it easy for your components to subscribe to changes in your store. Since it's backed by Immutable.js, you only render when something actually changes, which can save React the trouble of building a whole virtual DOM and diffing that against the actual DOM.

Why even start if you know nothing is different? irecord knows when React doesn't have any work to do so you only run `React.render()` when it does.

## Install

```
$ npm install --save irecord
```

## Use / API

```js
import irecord from 'irecord';

const record = irecord({
  a: 'a',
  b: 'b'
});

// record.get('a') // => 'a'
  assert.equal(record.get('a'), 'a',
    '.get() should return a value for the specified key.');

record.set('c', 'c');

assert.equal(record.get('c'), 'c',
    '.set() should set the value for the specified key');

record.remove('b');

assert.equal(record.get('b'), undefined,
    '.remove() should remove the key passed in');

// record.toJS(); // => [Object object]
//   get record as regular JS object.
const obj2 = record.toJS();

assert.deepEqual(record, obj2,
    '.toJS() should return a JS object');
```

## Events

```js
const original = {
  a: 'a',
  b: 'b'
};
const record = irecord(original);

// Listen for change events - get current and previous values.
record.on('change', ({ value, previous }) => {
  assert.pass('should emit change events.');

assert.deepEqual(value.toJS(), {
    a: 'a',
    b: 'b',
    c: 'c'
  }, 'new value should be passed.');

assert.deepEqual(previous.toJS(), original,
    'previous value should be passed.');
});

record.set('c', 'c');
```

## Rx Observable

Here are the Rx Observable methods you can use with irecord instances.

### .subscribe()

```
record.subscribe(
  ({ value, previous }) => {
    assert.pass('should emit change events.');

assert.deepEqual(value.toJS(), {
      a: 'a',
      b: 'b',
      c: 'c'
    }, 'new value should be passed.');

assert.deepEqual(previous.toJS(), original,
      'previous value should be passed.');

},
  (err) => { assert.fail('err: ' + err); },
  () => { assert.pass('complete'); }
);
```

### .filter()

```js
const original = {
  a: 'a',
  b: 'b'
};
const record = irecord(original);

record.filter(({value}) => {
  return value.toJS().c === 'again';
}).subscribe(({ value }) => {
  assert.equal(value.toJS().c, 'again',
    `should filter out changes that don't match the predicate`);
});

record.set('a', 'changed');
record.set('c', 'c');
record.set('c', 'again');
```