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

Question

[NkDev]

Скажите. Я хочу отправлять стейт на сервер при каждом его изменении. Вернее не весь стейт, а только свойства которые изменились. Скажите, как это реализовать?

Answer 1

[Артем]

//Перед обновление стейта сохраняешь текущую версию
const oldState = { ...state }
//Обновляешь стейт
setState({ foo: 'bar' });

//Этот код нужно выполнять в юзефект с депсами стейта
//Это массив измененных свойств 
const changedProperties = {};
for (const key in state) {
  if (state.hasOwnProperty(key) && oldState[key] !== state[key]) {
    changedProperties[key] = state[key];
  }
}

//Проверяем если были обновления и отправляем
if (Object.keys(changedProperties).length > 0) {
  fetch('/endpoint', {
    method: 'POST',
    body: JSON.stringify(changedProperties),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((response) => {
    if (response) {
      console.log('Данные успешно обновлены на сервере');
    } else {
      console.log('Не удалось обновить данные на сервере');
      // В случае ошибки апдейтп можно откатить  стейт
      setState(oldState);
  });
}

По коду сам смотри куда тебе проще запихнуть