审核模块workspace

一.问题分析


idps项目中需要新加字段,这个字段默认值为true,但是idps是通过rxjs这个技术进行管理的,如果不了解RxJS的数据管理手段就会很难修改,并且去修改的时候一定不要直接去修改类的实例化,项目中的workspace使用的是单例模式,仅仅new一次,仅仅会根据id的不同重新进行实例化,接口的重新出发使用其中自定义的方法进行重新调用。

二.代码实现


js 复制代码
export class Workspace {
  readonly filterStatus$ = new BehaviorSubject<boolean>(true);
  // 设置订阅状态的方法
  setFilterStatus(status: boolean) {
    this.filterStatus$.next(status);
    this.refreshData();
  }
  // 通过get方法获取这个observerble的值
  get filterStatus() {
    return this.filterStatus$.value;
  }
// 构造方法
  constructor(id: string) {
    
  }

  // 审核:这次需要新加字段的接口
  getReviewItems() {
    from(reviewService.getReviewItems(reviewDocIds, this.filterStatus))
      .pipe(takeUntil(this.destroy$))
      .subscribe(({ items, canApprove }) => {
        this.canApprove$.next(canApprove);
        this.reviewCardItems$.next(items);
      });
  }

  getReviewResolvedNum() {
    reviewService.getResolvedNum(this.id, this.filterStatus).then((res: ISafeAny) => {
      this.reviewResolvedNum$.next(res);
    });
  }
}
js 复制代码
const getStatusFilter = (status: boolean) => {
    // getButtonStatus(status);
    setButtonStatus(!buttonStatus);
    workspace.setFilterStatus(status);
  };

三.此次问题解决数据导向图


四.使用RxJS实现组件间的传值


  1. 在需要传递数据的组件中,创建一个SubjectBehaviorSubject对象,并将其作为状态管理。
js 复制代码
import React, { useState, useEffect } from 'react';
import { Subject } from 'rxjs';

const dataSubject = new Subject();

const SenderComponent = () => {
  const [data, setData] = useState('');

  const sendData = () => {
    dataSubject.next(data);
  };

  return (
    <div>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <button onClick={sendData}>Send</button>
    </div>
  );
};

export default SenderComponent;

在上述示例中,我们创建了一个dataSubject作为数据源,并在sendData函数中调用dataSubject.next()来发送数据。

  1. 在接收数据的组件中,使用useEffect钩子来订阅数据源的变化,并在组件卸载时取消订阅。
javascript 复制代码
import React, { useState, useEffect } from 'react';
import { Subscription } from 'rxjs';

const ReceiverComponent = () => {
  const [receivedData, setReceivedData] = useState('');
  let subscription;

  useEffect(() => {
    subscription = dataSubject.subscribe((data) => {
      setReceivedData(data);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return <div>Received Data: {receivedData}</div>;
};

export default ReceiverComponent;

五.对应需要补充的知识


  • TypeScript面向对象
  • RxJS相关内容
相关推荐
liangshanbo12155 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15887 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_7 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15888 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫9 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo9 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li9 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊10 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz12 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化