Redux и лишний рендер react компонентов

Question

Redux и лишний рендер react компонентов

Рейтинг: 0Ответов: 1Опубликовано: 03.08.2023

Мой стек next.js (react) и @reduxjs/toolkit. Redux изучать начал недавно. У меня есть объект с карточками товаров и Slice. Я меняю состояние конкретной карточки const cardId = action.payload.cardId;

cardsData = {
    'id1'{
        text:'текст 1',
        showText: false
    },
    'id2'{
        text:'текст 2',
        showText: false
    },
    'id3'{
        text:'текст 3',
        showText: false
    }
}

const trainersSlice = createSlice({
    name: 'trainers',
    initialState:{
        trainersCards:cardsData,
    },
    reducers: {
        toggleShowText: (state, action) => {
            const cardId = action.payload.cardId;
            const card = state.trainersCards[cardId];
            if (card) {
                card.showText = !card.showText;
            }
        },
    },
});

Когда я меняю card.showText = !card.showText; у меня обновляются все карточки, а не только с нужным cardId. На работу приложения это не влияет, но так ведь быть не должно. Я подозреваю что когда я делаю toggleShowText: (state, action) => { то state тут это весь объект с карточками и поэтому происходит перерендер всех карточек при изменении showText в одной из них. Как мне сделать так чтобы state был конкретной карточкой? Или я вообще всё делаю не так?

На всякий случай вот компонент, может дело в нём:

export default function Card(props) {
    const { cardId, title, text, img, showText, sliderRef } = props;
    //const stateCard = useSelector((state) => state.trainers.trainersCards[cardId]);
    const dispatch = useDispatch();

    const toggleShowText = () => {
        dispatch(toggleShowTextAction({cardId}));
        console.log('click', cardId);
    }
    console.log('render', cardId);
    let date = new Date() + '';
    
    return <div className={`${styles.card}`}>
        <div className={`${styles.height}`}>
            <img src={img} alt={title} className={`${styles.img}`}/>
        </div>
        <div className={`${styles.container}`}>
            <h3 className={`${styles.title}`} >{title} {date}</h3>
            <TextBlock text={text} showText={showText} sliderRef={sliderRef} />
            <div className={`${styles.button}`} onClick={toggleShowText}>{showText ? 'Свернуть ▲' : 'Развернуть ▼'}</div>
        </div>
    </div>
}

javascript reactjs redux

Источник: Stack Overflow на русском

Answer 1

▲ 0

Как оказалось я действительно не понимал свой код. У меня есть родительский компонент в котором я вывожу карточки как

    const cardsData = useSelector((state) => state.trainers.trainersCards);
    
    {Object.keys(cardsData).map((cardId) => (
          <Card 
            key={cardId}
            cardId={cardId}
            title={cardsData[cardId].title}
            text={cardsData[cardId].text} 
            img={cardsData[cardId].img}
            showText={cardsData[cardId].showText}
            sliderRef={sliderRef}
          />
        ))}

Во время изменения данных в хранилище происходит ререндер из за useSelector. Чтобы избежать лишних рендеров нужно использовать за пределами компонента store.getState() вместо useSelector.

useSelector использовать внутри компонента Card и вытаскивать конкретную карточку по cardId. Но так лучше не делать. Вообщем я ожидал от Redux больше чем надо, а проблемы не было.

Redux и лишний рендер react компонентов

Ответы