Question

我想从API端点获取数据，但是当我再次回到屏幕或组件时，不需要再次获取数据。

例如，我需要一个配置，用于确定模式对话框的布局，并且仅在打开对话框时才想获取它。下次，我们打开对话框，我不需要再次获取配置。

我需要React / Redux和Angular 6+的解决方案。

Answer 1

对于Angular，您可以在服务中使用可观察的内容来缓存响应。

服务

@Injectable({ providedIn: 'root' })
export class ConfigClass {
  private configSource = new ReplaySubject<any>(1);    // <-- buffer 1, will emit the last result on subscription
  public config$ = this.configSource.asObservable();

  constructor(private http: HttpClient) {
    this.getConfig();         // <-- call API once
  }

  getConfig() {
    this.http.get('url').subscribe(
      res => this.configSource.next(res),
      err => this.configSource.error(err)
    );
  }
}

组件

export class SomeComponent implements OnInit {
  config: any;

  constructor(private configService: ConfigService) { }

  ngOnInit() {
    this.configService.config$.subscribe(
      res => this.config = res,
      err => { }
    );
  }
}

Answer 2

在反应中，您可以这样做：

Redux状态

{
  MODAL_CONFIG: null   // INITIAL STATE AS null
}

YourModal.js

// INSIDE YOUR MODAL COMPONENT

const dispatch = useDispatch();  // FROM react-redux
const MODAL_CONFIG = useSelector((state) => state.MODAL_CONFIG); // FROM react-redux

useEffect(() => {                            // EFFECT TO FETCH API
  if (MODAL_CONFIG === null) {               // WILL ONLY FETCH API IF MODAL_CONFIG STATE IS null
    fetchApiForConfig().then((data) => 
      dispatch(
        type: "UPDATE_MODAL_CONFIG",
        payload: {config: data}
      );
    );
  }
},[dispatch,MODAL_CONFIG]);

return(
  MODAL_CONFIG ?
    <YourModalUI/>    // IF MODAL_CONFIG EXISTS. DISPLAY MODAL
  : <SomeSpinner/>    // ELSE DISPLAY SPINNER
);

reducer.js

function reducer(state,action) {
  switch(action.type) {
    case "UPDATE_MODAL_CONFIG": {
      return({
        ...state,
        MODAL_CONFIG: action.payload.config
      });
    }
    default: {
      return state;
    }
  }
}

还有很多改进的余地，但这基本上是您需要做的。

如何获取仅需获取一次的数据

2 个答案: