Как использовать Memo с топором ios?

Question

Как можно избежать повторного нажатия на API после возврата ответа от того же API под тем же параметром

Как я могу использовать ловушку useMemo с деталью ax ios для повышения производительности, поскольку я новичок в реакции и изучал, что useMemo можно использовать для оптимизации производительности.

Отредактировано:

код с функцией memo теперь это правильный путь?

 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)

const memo = (callback) => {
  const cache = new Map();
  return (...args) => {
    const selector = JSON.stringify(args);
    if (cache.has(selector)) return cache.get(selector);
    const value = callback(...args);
    cache.set(selector, value);
    return value;
  };
};

const memoizedAxiosGet = memo(axios.get);  

      useEffect(() => {
          dispatch({
              type: "FETCHREQUEST"
          });
          memoizedAxiosGet(`https://example.com/${IdentifierId}/now`)
              .then(reponse => {
                  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>
      );
  };

Answer 1

React.useMemo не сохраняет значения из предыдущих результатов. Проверьте этот пример на dev.to :

  const value = useMemo(() => expensiveFunction(a), [a]);

Когда он уже произвел расчет для a, являющегося 2, он не будет делать это для 2 в следующий раз. Аналогично для 3 или 4.

Тем не менее, он действительно может запомнить только одно значение. Если в первый раз он выполнил вычисление для 1, а затем выполнил вычисление для 2, он больше не будет помнить, каков результат для 1. Если снова ввести 1, он снова выполнит вычисления.

Итак, в вашем случае вы должны создать функцию memo с длинной памятью:

const memo = (callback) => {
  // We will save the key-value pairs in the following variable. It will be our cache storage
  const cache = new Map();
  return (...args) => {
    // The key will be used to identify the different arguments combination. Same arguments means same key
    const key = JSON.stringify(args);
    // If the cache storage has the key we are looking for, return the previously stored value
    if (cache.has(key)) return cache.get(selector);
    // If the key is new, call the function (in your case axios.get)
    const value = callback(...args);
    // And save the new key-value pair to the cache
    cache.set(key, value);
    return value;
  };
};

const memoizedAxiosGet = memo(axios.get);

Эта memo функция будет действовать как кеш значения ключа. Если параметры (в вашем случае ваш URL) вашей функции (axios.get) совпадают, функция не будет выполнена. Вместо этого будет возвращен предыдущий результат.

Таким образом, вы можете просто использовать эту памятную версию memoizedAxiosGet в своем useEffect, чтобы убедиться, что сетевой запрос не повторяется для этого конкретного обращения.

Проверьте это демо, встроенное в React!