El componente React-Redux se vuelve a renderizar cada vez que hay cambios en el estado no conectado en el almacenamiento. ¿Cómo puedo evitarlo?
Tengo un componente llamado FileHeader. Cada vez que redimensiono una columna en él, se envía una acción para cambiar un estado. Esto activa un nuevo renderizado.
ListeHeader.js
const ListHeader = props => {
const dispatch = useDispatch()
let headerRef = useRef(new Array())
const { header_ } = useSelector((state) => state.ui, shallowEqual)
const onResize = ( e, {event, node, size}) => {
dispatch(changeHeaderWidth(node.id, size.width))
}
return (
{header_
.map((header) => {
const getRef = (element) => headerRef.current.push(element)
return (
<ResizableBox
axis="x"
width={header.width}
height={20}
key={header.id}
handle={<DragHandle id={header.id} />}
onResize={onResize}
minConstraints={[50, 20]}
maxConstraints={[300, 20]}
>
<Header
key={header.id}
width={header.width}
handleDrag={handleDrag}
onClick={handleSort(header.id)}
>
<HeaderText ref={getRef}>{header.name}</HeaderText>
</Header>
</ResizableBox>
)
})}
)
}
Este es mi reducer
export default (state = initial_state, actions) => {
switch (actions.type) {
case consts.CHANGE_HEADER_WIDTH : return {
…state,
headerWidth: state.headerWidth.map((item) =>
item.id === actions.payload.id ? { …item, width: actions.payload.neWidth}
: item),
}
break;
default: return state;
}
}
No estoy llamando al estado headerWidth en mi componente ya que esto causa un nuevo renderizado cuando cambia.
davy.ai
ListHeader.js
Este es mi reducer
Cada vez que redimensiono una columna en el componente
ListHeader
, se envía una acción para cambiar un estado que desencadena una re-renderización.