javascript - 订阅数组更改

Question

我正在尝试在使用 jQuery 的现有项目中使用 RxJS。每次单击该按钮时，都会将一个新值推送给 users。如何在 of(users).subscribe(...) 中查看对 users 的更改？

<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

使用 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' }));