Какой правильный путь для редуктора влияет на состояние, которое находится далеко?

Question

Я создаю проект React-Redux и пытаюсь быть идиоматичным в отношении моего использования Redux и избегать совместной работы таким образом, чтобы впоследствии было трудно поддерживать код.Я также новичок в этой экосистеме.

У меня есть вложенное состояние, которое выглядит примерно так:

{ foo: {stuff}, bar: {baz: {stuff} } }

, и я использую combineReducers, так что foo и barи baz у всех есть свои собственные редукторы, чтобы интерпретировать соответствующие действия для изменения их собственного состояния.Но я столкнулся с ситуацией, когда действие, в зависимости от состояния baz, может иметь значение, которое может представлять интерес для foo.

У меня есть три основные идеи, которые я ненавижупервый и не знаю, как сделать два других:

1) Сделайте так, чтобы редукторы для bar / baz имели доступ ко всему состоянию, и попросите их нести за это ответственность.

Это делает эту точную ситуацию легкой для решения, но она кажется плохой с точки зрения разделения интересов.

2) Каким-то образом редуктор baz отправляет соответствующее действие, которое foo затем выберетна.

Это имеет смысл для меня с точки зрения описательности, но я на самом деле не знаю, как это сделать.Тот факт, что это не очевидно, заставляет меня думать, что Redux против этого.

3) Импортируйте некоторую волшебную библиотеку, которая делает это простым

Я не знаю, какая библиотека будет делать это, хотя.Похоже, это не то, что делает Redux-Thunk (хотя я не уверен), и тогда я действительно не знаю.

Answer 1

tl; dr - я решил использовать redux-loop, который позволяет вам описывать побочные эффекты редуктора, не делая редуктор чистым / без состояния.

Почему я не использовал redux-thunk для этого:

Наиболее распространенный подход (основанный на моем поиске в Google), представленный в ответе @ lecstor, заключается в использовании redux-thunk.В типичной организации кода redux-thunk сначала нужно выяснить все, что должно произойти, а затем через некоторое количество распределить некоторое количество действий, асинхронных операций и т. Д.

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

Таким образом, с redux-thunk вы должны либо дублировать логику редуктора (плохо), либо выполнить всю бизнес-логику перед редукторами, а затем запустить набор действий, описывающих состояниеизменения.

Это все, что нужно сказать, redux-thunk делает свое волшебство до того, как произойдет редуктор.

Почему я думаю, redux-loop было лучше:

С другой стороны, redux-loop сотворяет магию после редуктора происходит, позволяя редуктору описать эти эффекты (включая запуск асинхронных действий, отправку fпоследующие действия и т. д.) без нарушения безгражданства.

Для исторической записи это означает, что в приведенном выше редукторе foo вы можете сделать:

// ... nextState is the new fooState
if (isWeird(nextState)) {
  return loop(nextState, Cmd.action(makeWeirdAction()));
} else {
  return nextState;
}

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

Answer 2

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

Если «действие» затрагивает более одного среза, то оно должно отправлять несколько «действий». Присвоение имен может привести к путанице.на данный момент, но в основном redux-thunk позволяет вам сделать именно это.

Если у вас есть обычные создатели действий, например modifyFoo & modifyBar, которые просто возвращают объекты действий, которые отправляются редукторам, сredux-thunk включен, вы можете создать более сложное "действие", которое отправляет оба.например ..

function modifyFoo(options) {
  return { type: "MODIFY_FOO", payload: options }};
}

function modifyBar(options) {
  return { type: "MODIFY_BAR", payload: options }};
}

function modifyFooBar(options) {
  return (dispatch, getState) => {
    const appState = getState();
    dispatch(modifyFoo(options.foo, appState.baz));
    dispatch(modifyBar(options.bar));
  }
}

Используя getState, у вас есть доступ к полному состоянию приложения, если оно вам нужно.