Как правильно работать с контекстом в react?

Question

[Dudarik]

Здравствуйте!
Пытаюсь разобраться с контекстом в React. Собственно ссылка на приложение https://codesandbox.io/s/affectionate-feistel-yxsnkd
Имеется стейт(два поля: 1. массив 2. переменная === случайному числу из этого массива), у каждого поля свой редюсер. По моей логике, два последовательно вызванных "диспатча" должны отработать друг за другом.

dispatch({type: REMOVE_ITEM, payload: state.rndNum });
dispatch({type: SET_RND_NUM, payload: state.arr[getRndVal(0, state.arr.length - 1)]});

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

Answer 1

[0xD34F]

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

Не "удаляем" - создаётся новый массив, в котором может оказаться (а может и нет) на один элемент меньше. Не "иногда" - всегда выбор нового случайного элемента осуществляется из старого массива.

Как правильно реализовать такую логику?

Надо выбирать новый случайный элемент из нового массива, а не из старого. Переносим соответствующий вызов dispatch из обработчика клика в эффект:

useEffect(() => {
  dispatch({
    type: SET_RND_NUM,
    payload: state.arr[Math.random() * state.arr.length | 0],
  });
}, [ state.arr ]);

Comments

[Alexandroppolus]

Переносим соответствующий вызов dispatch из обработчика клика в эффект

святые отцы не рекомендуют так делать - https://beta.reactjs.org/learn/you-might-not-need-...
действие должно остаться в обработчике.

Но получить новый массив для второго действия действительно надо. В рамках ограничений концепции useReducer, это можно сделать только внутри вызова редьюсера. Так что здесь проще всего схлопнуть два редьюсера (reducerArr и reducerRndNum) в один, а в экшен SET_RND_NUM не передавать рандомное число, перенеся эту логику в редьюсер. Да, редьюсер перестанет быть "чистой функцией", но невелика потеря.

[Dudarik]

Да, конечно, вы правы. Я не правильно выразился. Создаем новый массив и записываем его в стейт по ключу arr. Я так и реализовал в конце-концов, как предлагаете вы, обновляя массив в хуке useEffect(с зависимостью от state.arr). Но это же вызывает лишний рендер или я ошибаюсь? Нет ли какой-нибудь возможности, вызвать несколько диспатчей, перед рендером? Я читал, что в redux есть метод batch - который объединяет несколько вызовов функций обновления состояния и уже потом запускает рендер.

[Dudarik]

Alexandroppolus, В принципе, возможно так сделать, но опять же, так тоже не рекомендуется делать. :) Кажется выход один - использовать redux в таких случаях...

[Alexandroppolus]

Dudarik, redux безусловно лучше, чем "стотысячная попытка запилить свой редукс на контекстах". Конкретно для твоего случая зарешает хук useStore - ты сможешь получить актуальную версию массива как store.getState().arr непосредственно перед вторым действием.

ещё можно использовать МобХ, там всё будет легко и просто (как, впрочем, всегда бывает). Рекомендую.

[Alexandroppolus]

в экшен SET_RND_NUM не передавать рандомное число, перенеся эту логику в редьюсер. Да, редьюсер перестанет быть "чистой функцией", но невелика потеря.

ещё, как вариант, можно сохранить чистоту редьюсера, если передать в экшн результат вызова Math.random().
а конкретное итоговое значение будет определено в самом редьюсере, основываясь на переданном значении из экшена и актуальной версии массива. Всё как любят ФП-шники.

[Dudarik]

Alexandroppolus, я понял. Спасибо за советы!!!