Tengo una situación con dos páginas. La primera es la página principal, la derecha se muestra en consecuencia. El componente correcto se procesa según el estado de redux y básicamente funciona correctamente. Breve ejemplo sin sentencias if:
const renderRightComponent = () => { return <ComponentOnRightSide />; };y
return ( <div> <ComponentOnLeftSide /> {renderRightComponent()} </div> );Cuando se hace clic en un botón en ComponentLeftStide, envía una acción a la tienda redux. Se almacena correctamente (según las herramientas Redux Dev de Chrome). Sin embargo, de alguna manera necesito volver a renderizar el componente correcto después de la acción de envío. Estoy un poco perdido con la forma en que podría hacer eso. Probablemente me falte la palabra clave correcta. ¿Alguien tiene una idea?
Un poco más de aclaración: estoy usando un selector de fecha de la interfaz de usuario del material en el componente izquierdo.
onChange={(newValue) => { setValue(newValue); }}Este es el valor que se envía a react-redux. En el componente correcto estoy usando useSelector:
const [date, setDate] = useState( useSelector((state) => state.date) );A este lo llamaré en la declaración de devolución con la ayuda de la siguiente función:
const getTitle = () => { if (date) { return moment(date).format("D MMM, YYYY"); } return ""; };Si i console.log date, no cambia en el componente correcto.
El código que ha compartido no está accediendo al estado de Redux correctamente.
const [date, setDate] = useState( useSelector((state) => state.date) ); El estado de reacción solo se inicializa una vez al montar el componente. Sospecho que la razón por la cual el código anterior no arroja advertencias de ganchos React se debe al hecho de que la función useSelector aún se llama en cada ciclo de procesamiento ( por lo que no está rompiendo la regla de llamada condicional ) y el resultado de las llamadas posteriores se ignora.
Para almacenar en caché correctamente una copia local, querrá dividirla y usar un gancho useEffect para actualizar el valor de date en caché.
Ejemplo:
const dateState = useSelector((state) => state.date); const [date, setDate] = useState(dateState); useEffect(() => { setDate(dateState); }, [dateState]);Tenga en cuenta que la duplicación de estado localmente a menudo se considera antipatrón en React. Simplemente consuma el estado Redux directamente.
const date = useSelector((state) => state.date); ... const getTitle = () => { return date ? moment(date).format("D MMM, YYYY") : ""; };