0
89
Vistas¿Es la mejor manera de manejar todo el estado en la página con React?
Solía usar el lenguaje Elm. Debe tener un estado en la página (como normal, cargando, error) y puedo escribir en lenguaje Elm como este
type Action = Choose | Edit | Confirm type ModalType = Address | Payment | Tax type State = Normal | PopupModal ModalType Action | Error String // and use like this Normal (normal state) PopupModal Address Choose (Popupmodal state) Error "something went wrong" (Error state)Es decir, si desea utilizar un estado PopupModal, debe enviar Action y ModalType como parámetro. o si quieres el estado Normal, no envías nada.
Entonces, quiero usar este concepto en React. Tiene 2 estados (modal normal y emergente) y el estado "modal emergente" tiene 3 estados (elegir, editar, confirmar)
¿Es la mejor manera de usar este concepto en React? Si es mejor, ¿cómo puedo escribirlo en React?
por ahora lo escribo asi
const ACTION = Object.freeze({ CHOOSE: "CHOOSE", EDIT: "EDIT", CONFIRM: "CONFIRM", }); const MODAL_TYPE = Object.freeze({ ADDRESS: "ADDRESS", PAYMENT: "PAYMENT", TAX: "TAX", }); const STATE = Object.freeze({ NORMAL: "NORMAL", MODAL: (type, action) => { switch (type) { case MODAL_TYPE.ADDRESS: return <Address action={action} /> case MODAL_TYPE.PAYMENT: return <Payment action={action} /> case MODAL_TYPE.TAX: return <Tax action={action} /> default: break; } }, }); const render = (state) => (type, action) => { switch (state) { case STATE.NORMAL: return <Normal />; case STATE.MODAL: return state(type, action); default: break; } }; // Normal state render(STATE.NORMAL)() // Popup modal state render(STATE.MODAL)(MODAL_TYPE.PAYMENT, ACTION.CHOOSE) render(STATE.MODAL)(MODAL_TYPE.TAX, ACTION.CHOOSE)1 Respuestas
Responde la pregunta0
hay algunas opciones:
a) Use una interfaz mecanografiada que contenga exactamente los datos escritos en useState hook.
export enum UserStatus { LOADING = "loading", SUCCESS = "success", ERROR = "error", } const [selectedCategories, setSelectedCategories] = useState<States>([]); b) Después de leer su publicación, el reconocimiento de variantes debería ser confiable en este contexto 
c) Prepare el componente modal genérico, que contiene algunas propiedades generales (título, descripción), con una variable de configuración, y en función de esa configuración, represente el caso en función de esa variable:
{props.setVar == 'address' && <Address />} {props.setVar == 'payment' && <Payment />} {props.setVar == 'tax' && <Tax />}