javascript - form - redux saga

Diseño de acciones redux y reductores para un componente reutilizable React.

Question

Estoy desarrollando una gran aplicación con Redux y React y decidí hacer algunos componentes reutilizables, como casillas de verificación personalizadas y botones de radio.

Como deseo almacenar esta información en la tienda Redux para poder depurar el estado de la aplicación fácilmente y el mismo componente tiene la misma funcionalidad en todas partes, parece una buena idea crear reductores y acciones para cada componente.

Sin embargo, los reductores Redux devuelven un nuevo estado y lo guardan en la tienda con el nombre del reductor como una clave y esto prohíbe tener más de un componente del mismo tipo en la misma página usando las mismas acciones y reductores pero manteniendo diferentes estados.

Creo que hay dos soluciones a este problema:

• Cree diferentes acciones y reductores para cada componente que uso, incluso si el componente y sus funcionalidades son las mismas. Esta solución no parece ser una buena solución porque habrá una gran cantidad de código redundante.

• Cree acciones con parámetros suficientes para poder diferenciar cada uno en el reductor y de esa manera cambiar solo la parte del estado que se especifica.

Seguí adelante con la segunda opción.

Archivo de acciones para el componente CheckBox:

import {createAction} from ''redux-actions'';

/****** Actions ******/
export const CHANGE_CHECKBOX_STATE = "CHANGE_CHECKBOX_STATE";

/****** Action creators ******/
export const changeCheckboxState = createAction(CHANGE_CHECKBOX_STATE, (block, name, state) => {
  return {
    block,
    name,
    state: {
      checked: state,
    }
  };
});

Archivo de reductores para el componente CheckBox:

import {handleActions} from ''redux-actions'';

import {CHANGE_CHECKBOX_STATE} from ''./CheckBox.actions'';

export const checkBoxComponent = handleActions({
  CHANGE_CHECKBOX_STATE: (state, action) => ({
    [action.payload.block]: {
      [action.payload.name]: action.payload.state
    }
  })
}, {});

Utilizo el block para especificar la página, el name para especificar el nombre del componente específico (por ejemplo, género) y el estado como y objeto con el nuevo estado.

Pero esta solución también tiene algunos problemas:

• No se puede especificar el estado inicial de cada componente porque las claves del estado son dinámicas.
• Complica mucho la estructura de la tienda con muchos estados anidados.
• Agrega datos por componente y no por formulario, lo que complicará la depuración y es lógicamente incorrecto.

No tengo suficiente experiencia con Redux y React para pensar en una solución mejor para este problema. Pero me parece que me estoy perdiendo algo importante sobre la relación React-Redux y esto plantea algunas preguntas:

• ¿Es una buena idea almacenar el estado de estos componentes reutilizables en la tienda de Redux?

• ¿Me equivoco al unir los componentes React con acciones y reductores de Redux?

Answer 1

El error fundamental aquí es que tienes 0 componentes tontos. Los controles básicos, como las casillas de verificación, deben ser componentes tontos que solo utilicen accesorios, ya que los padres tienen la responsabilidad de seleccionar y actualizar el estado adecuado para una casilla de verificación en particular.

Answer 2

No describa sus reductores Redux (su estado de aplicación general) en términos de los componentes que consumen ese estado. Realice el seguimiento de la otra manera, describiendo el estado de su aplicación de manera descriptiva y luego haga que sus componentes "tontos" consuman ese estado descriptivo.

En lugar de rastrear "El estado de esta casilla de verificación para el formulario relacionado con foo", realice el seguimiento de "este valor booleano de foo" y luego haga que la casilla de verificación consuma ese estado.

Una tienda de ejemplo para la casilla de verificación:

const initialState = {
    someFooItem: { isCertainType: false }
};

export function foos(state = initialState, action) {
    switch(action.type){
        case(UPDATE_FOO_VALUE):
            return {
                ...state, 
                [action.payload.id]: {
                    isCertainType: action.payload.isCertainType
                }
            }
    }
}

Un ejemplo de casilla de verificación consumiendo la tienda.

class CheckBox extends React.Component {
    render() {
        return <input type="checkbox" checked={this.props.checked} />
    }
}

El componente padre

class ParentComponent extends React.Component {
     render() {
         return <CheckBox checked={this.foo.isCertainType} />
     }
}