如何避免在Reactjs中每次都调用API？

Question

如何在相同参数下返回相同API的响应后，如何避免重新访问API

[目前，我有两个按钮都存储一些ID，当我单击BUTTON1时，api接受请求并提供响应；当我再次单击BUTTON2时，它将遵循相同的过程。两个按钮都将IdentifierId作为道具发送到SwitchComponent

现在主要问题是，当我再次单击Buuton1时，它将再次命中API，由于我不想存储在本地存储中，如何避免使用此部分

如何在React中声明要进行缓存？

这里是我的代码看起来像：


  const initialState = 
      SwichManagment: [],
      Error: false
  

  const reducer = (state, action) => 
      switch (action.type) 
          case "FETCHREQUEST":
              return 
                  ...state,
                  hasError: false
              ;
          case "FETCHSUCCESS":
              return 
                  ...state,
                  SwichManagment: action.payload,
              ;
          case "FETCHFAILURE":
              return 
                  hasError: true
              ;
          default:
              return state;
      
  
  const SwitchManagment = ( IdentifierId  ) => 

  const [states, dispatch] = useReducer(reducer, initialState)

      useEffect(() => 
          dispatch(
              type: "FETCHREQUEST"
          );
          axios.get(`https://example.com/$IdentifierId/now`)
                  dispatch(
                      type: "FETCHSUCCESS",
                      payload: response.data
                  );
              )
              .catch(error => 
                  dispatch(
                      type: "FETCHFAILURE"
                  );
              );
      , [IdentifierId]);

      return (
        <div >
        Object.keys(states.SwitchManagment).map(key => (
          <div className="item" key=states.SwitchManagment[key].id>
            <p>states.SwitchManagment[key].name</p>
            <p>
                states.SwitchManagment[key].progress
           </p>
         </div>
        ))
    </div>
      );
  ;