Может ли состояние редукции быть не синхронизированным?

function Sorter({ redux_state_obj, set }) {
  const handle_click = () => {
    const new_state = JSON.parse(JSON.stringify(redux_state_obj))

    // update new_state based on redux_state_obj

    set(new_state)
  }

  return  <div onClick = {handle_click}>button</div>
}

Предположим, я дважды очень быстро нажимаю на Sorter. Может ли redux_state_obj быть устаревшим во втором клике, то есть он использует redux_state_obj до того, как первый щелчок обновил его?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Javascript выполняется в одном потоке с использованием цикла событий и очереди задач для обеспечения согласованности и обеспечения возможности асинхронных операций.

Вот хорошая статья о том, как это работает и как планируются задачи: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/#try-it

Самый простой алгоритм очереди задач таков:

  1. Проверить очередь задач
  2. Если их нет -> перейти к шагу 1
  3. Если есть самая старая задача -> удалите ее из очереди, дождитесь ее завершения, затем перейдите к шагу 1.

В вашем случае первый щелчок запланирует выполнение функции handle_click, затем он будет выполнен (синхронно изменяя ваше состояние редукции). Если вы щелкнете, когда ваша функция выполняется (основной поток занят), браузер просто запланирует задачу для обработки этого второго щелчка, и она будет завершена только после возврата вашей функции. Таким образом, второй вызов handle_click будет выполнен с актуальными значениями состояния.

Тем не менее, в библиотеках redux или react может быть асинхронный код, который планирует обновление состояния для другой задачи. В этом случае ваш второй вызов handle_click произойдет ДО запланированного обновления состояния. Например, одним из известных примеров этого в реакции является метод setState: https://sentry.io/answers/forget-set-state-is-async/

Но для того, чтобы такая ситуация возникла, вы должны щелкать быстрее, чем браузер выполнит вашу функцию обработчика, что может быть порядка наносекунд, поэтому вам нужно быть самой быстрой рукой на всем Диком Западе, иначе ваш обработчик должен быть написан очень плохо.

Другие вопросы по теме