Пример мемоизации в React-Redux

Перед запоминанием:

Каждое действие выборки для получения пользовательской таблицы выполняется 100 сообщениями. Действия по извлечению выполняются даже в том случае, если пользовательские данные уже извлечены. Мы используем функцию memoize в lodash, чтобы остановить ненужную выборку.

источник/действия/index.js

import _ from 'lodash';
import jsonPlaceholder from '../apis/jsonPlaceholder';
export const fetchUser = (id) => async dispatch => {
  
  const response = await jsonPlaceholder.get(`/users/${id}`);
  dispatch({type: 'FETCH_USER', payload: response.data});
};

После запоминания:

Мы импортируем lodash, создаем функцию _fetchUser и вызываем ее внутри функции fetchUser.

источник/действия/index.js

import _ from 'lodash';
import jsonPlaceholder from '../apis/jsonPlaceholder';const
const _fetchUser = _.memoize(
  
  async (id, dispatch) => {
    const response = await jsonPlaceholder.get(`/users/${id}`);
    dispatch({type: 'FETCH_USER', payload: response.data});
  }
);
export const fetchUser = id => dispatch => {
  _fetchUser(id, dispatch);
};

Теперь мы видим, что нет ни одной ненужной выборки.

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

Что еще нужно сделать:

  • Поймите, почему функция memoize применяется именно так, как в верхнем регистре.
  • Найдите другой способ повторной загрузки при обновлении данных.

Ссылка :

Я веду блог о том, что я узнал, чтобы найти позже здесь для себя. Если вам довелось прочитать это дерьмо и там есть неверная информация, было бы полезно добавить комментарий нижеw.