javascript - react - Redux reductor/diseño en forma de estado para cortes de estado dependientes

redux thunk

Question

Disfruto el concepto de la composición del reductor en Redux, pero me he topado con un escenario en el que me gustaría dividir un reductor, pero los niños reductores se basarán en las secciones de estado de los demás para hacer sus cambios.

Por ejemplo

En mi estado, necesito hacer un seguimiento de lo siguiente:

• Un rango de posibles rangos (es decir [ 2, 3, 4, 5, 6 ] )
• El rango seleccionado actualmente (uno de los valores anteriores).
• Dependiendo del rango seleccionado , un rango de niveles de entrenamiento posibles. La relación es que el rango va desde [ 1 .. (selectedRank - 1) ]
• Un nivel de entrenamiento actualmente seleccionado dentro del rango anterior

Inicialmente, tenía un reductor más grande que encapsulaba todos estos aspectos:

function rankAndTraining(state = {
  selectedRank            : 4,
  availableRanks          : [ 2, 3, 4, 5, 6 ],
  availableTrainingLevels : [ 1, 2, 3 ],
  selectedTrainingLevel   : 2,
}, action) {
  .
  .
  .
    case SELECT_RANK: 

      let newRank = action.rank;

      if(!availableRanks.contains(newRank)) {
        // If new rank is not an allowed value, do nothing.
        return state;
      }

      // Update selectedRank with newRank...

      // Update availableTrainingLevels array based on newRank...
      // [ 1 ... (selectedRank - 1) ]

      // Update selectedTrainingLevel if it is now out of range 
      // of availableTrainingLevel (i.e. set to highest value of new range)

      return state;
  .
  .
  .
}

Quería dividir este reductor, ya que sentía que los rangos y los niveles de entrenamiento podían mantenerse en reductores separados.

Sin embargo, existen dependencias en las piezas de estado que aún tendrían que manejarse si el reductor se dividiera, como por ejemplo:

• Si el nuevo rango no es válido (por ejemplo, no está en los Rangos disponibles ), los bits del nivel de entrenamiento no deberían actualizarse.

Si tuviera que dividir los bits del nivel de entrenamiento en otro reductor, entonces no tendrían forma de saber el resultado de esta "verificación de rango ", ya que todo lo que "verían" en su corte de estado son las piezas del nivel de entrenamiento .

En este escenario, ¿el reductor anterior es realmente el "segmento más pequeño" de estado que puedo obtener, dadas las dependencias entre ellos? ¿O hay una mejor manera de dividirlo que quizás no esté viendo?

Answer 1

Si utilizas el middleware thunk de Redux, puedes inspeccionar todo el estado primero antes de despachar tu acción en vez de despachar tu acción y luego actualizar condicionalmente tu estado en el reductor:

function selectRankIfAllowed() {
  return (dispatch, getState) => {
    const { availableRanks } = getState(); 

    if(!availableRanks.contains(newRank)) {
      // If new rank is not an allowed value, do nothing.
      return state;
    }

    dispatch(selectRank());
  };
}

https://github.com/gaearon/redux-thunk