es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • 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?

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?

25 May, 2023 Programación

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.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ListHeader.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 (
    <headerbody>
      {header_
        .map((header) => {
          const getRef = (element) => headerRef.current.push(element)
          return (
            <resizablebox axis="x" width="{header.width}" height="{20}" key="{header.id}" handle=""></resizablebox><draghandle id="{header.id}"></draghandle>}
              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>

          )
        })}
    </headerbody>
  ) 
}

    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;
  }
}

    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.

Comments are closed.