Question

我正在尝试在使用jQuery的现有项目中使用RxJS。每次单击按钮时，都会将一个新值推入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

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

Answer 2

或者，您可以将新的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 3

一种方法是使用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)将在订阅内部发生

订阅阵列更改

3 个答案: