Tengo dos botones en un componente que está debajo del componente de la aplicación. Aunque está enviando acciones y la tienda está actualizada, la aplicación no se vuelve a renderizar. Idealmente, al presionar el botón, agrego un nombre ficticio que se colocará dentro de la matriz y luego se representa un componente diferente en función de los elementos numéricos dentro de esta matriz.
¿Alguien puede decir qué está pasando? Soy un principiante en reaccionar y redux.
Caja de arena: https://codesandbox.io/s/panel-item-with-redux-hxmihq?file=/src/PanelAdder.js
Aplicación.jsx
import React from "react"; import "./styles.css"; import { Panel } from "./Panel"; import PanelAdder from "./PanelAdder"; import { useSelector } from "react-redux"; export default function App() { const panels = useSelector((state) => state.panelItems); return ( <> <PanelAdder /> <div className="cards-container"> {panels || [].map((name) => <Panel {...{ name }} />)} </div> </> ); }PanelAdder.jsx
import React from "react"; import { useDispatch } from "react-redux"; import { addPanel } from "./actions/counterActions"; export default function PanelAdder() { const dispatch = useDispatch(); const handleClick = (name) => { dispatch(addPanel(name)); }; return ( <> <button onClick={() => handleClick("Panel 1")}> Add Panel 1</button> <button onClick={() => handleClick("Panel 2")}> Add Panel 2</button> </> ); }Panel.jsx
import React from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSquareMinus, faWindowMaximize, faRectangleXmark } from "@fortawesome/free-solid-svg-icons"; export const Panel = ({ name }) => { return ( <> <div className="card"> <div className="card-actions"> <FontAwesomeIcon icon={faSquareMinus} /> <FontAwesomeIcon icon={faWindowMaximize} /> <FontAwesomeIcon icon={faRectangleXmark} /> </div> <div className="card-body">{name}</div> </div> </> ); };Tienes 2 problemas:
Primero, en su función combineReducers, está agregando el reductor llamado paneles. Redux agregará esto al objeto de estado. Entonces, cuando hace referencia a él, debe hacer referencia al objeto de paneles que está anidado dentro de su objeto de estado. Debe obtener lo siguiente en su useSelector useSelector((state) => state.panel.panelItems)
En segundo lugar, está haciendo lo siguiente en el componente de su aplicación {panels || [].map((name) => <Panel {...{ name }} />)} . Entonces, lo que está haciendo aquí es mostrar la matriz de paneles o mapear a través de una matriz vacía, pero en realidad nunca mapea a través de la matriz de paneles. Pero lo que debe hacer es mapear a través de la matriz de paneles. Así que puedes mapear la matriz de paneles {panels.map((name) => <Panel {...{ name }} />)}
Por lo tanto, el componente de su aplicación debería tener el siguiente aspecto:
import React from "react"; import "./styles.css"; import { Panel } from "./Panel"; import PanelAdder from "./PanelAdder"; import { useSelector } from "react-redux"; export default function App() { const panels = useSelector((state) => state.panel.panelItems); return ( <> <PanelAdder /> <div className="cards-container"> {panels.map((name) => <Panel {...{ name }} />)} </div> </> ); }