如何获取只需要获取一次的数据

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;
    }
  }
}

还有很大的改进空间，但这基本上就是您需要做的。

如何获取只需要获取一次的数据

How to fetch data that needs to be fetched only once

store

fetch

reactjs

redux

angular