Подписаться на изменения массива

Question

Я пытаюсь использовать RxJS в существующем проекте, который использует jQuery.Каждый раз, когда нажимается кнопка, новое значение устанавливается на users.Как я вижу изменения в users в of(users).subscribe(...)?

<button class="hello">Hello</button>

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

const { of } = rxjs

let users = [
  { a: "b" }
]

of(users).subscribe(data => {
  console.log(data)
})

jQuery(document).on('click', '.hello', function () {
  users.push({ c: 'd' })
})

Answer 1

В качестве альтернативы вы можете использовать новый прокси-класс ES6 вместе с Subject https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set

let usersUpdate=new Subject()
let users = [
  { a: "b" }
]

usersUpdate.subscribe(data => {
  console.log(data)
})

let users=new Proxy([{ a: "b" }],{
set:(obj, prop, newval)=>{
    obj[prop] = newval
    userUpdate.next({obj, prop, newval})
    return true
   }
})

users.push('item')

Answer 2

Одним из способов было бы использовать BehaviorSubject

Так что для вашего случая было бы написать следующее:

const users$ = new BehaviorSubject([{ a: 'b' }]);

users$.subscribe((users) => {
  console.log(users);
});

jQuery(document).on('click', '.hello', function() {
  const users = [...users$.value]; // write like this so that array stays immutable
  users.push({ a: 'd' });
  users$.next(users);
});

Использование BehaviorSubject дает вам возможностьдля получения текущего значения: users$.value.

После того, как событие users$.next(users) будет отправлено, и console.log(users) произойдет внутри подписки

Answer 3

Используя оператор RxJS scan, вы можете преобразовать поток в другую форму, аналогично тому, как работает собственный метод JavaScript .reduce().В этом примере, когда вы захотите «протолкнуть» массив пользователей, вы можете просто отправить другого пользователя по теме newUser.

// Create a new subject
const newUser = new Subject();

// Use scan to add new users into array of users
const users = newUser.pipe(scan((acc, user) => [ ...acc, user ], []));

// Subscribe to the list of users and log
users.subscribe(data => console.log(data));

// Add new user to array on document click
jQuery(document).on('click', '.hello', () => users.next({ c: 'd' }));