时间戳

首页 > 解决方案 > 如何使用 Redux 只更新组件的一个实例？

javascript - 如何使用 Redux 只更新组件的一个实例？

问题描述

我正在尝试使用 Redux 更新我的卡片组件以禁用和更改点击颜色。Redux 可以很好地调度操作，但它会更新所有卡片，而不仅仅是被点击的卡片。每张卡片都有一个与之关联的对象，其中包含单词和值。该值是我想在单击时更改颜色的类名

零件

const Card = ({ wordObj, updateClass, isDisabled, cardClass }) => {
    
    const showColor = (e) => {
        updateClass(wordObj);
        console.log(cardClass)
    };
    return (
        <button
            onClick={(e) => showColor()}
            disabled={isDisabled}
            className={cardClass}>
            {wordObj.word}
        </button>
    );
};


const mapStateToProps = (state) => ({
    cardClass: state.game.cardClass,
});
export default connect(mapStateToProps, { updateClass })(Card);

行动

export const updateClass = (obj) => (dispatch) => {
    console.log(obj)
    dispatch({
        type: UPDATE_CARD,
        payload: obj,
    });
};

减速器

const initialState = {
    words: [],
    cardClass: 'card',
    isDisabled: false,
};

export default function (state = initialState, action) {
    const { type, payload } = action;
    switch (type) {
        case SET_WORDS: {
            return {
                ...state,
                words: payload,
            };
        }   

        case UPDATE_CARD:
            return {
                ...state,
                isDisabled: true,
                cardClass: ['card', payload.value].join(' '),
            };

        default:
            return state;
    }
}```

标签： javascriptreactjsredux

解决方案

您mapStateToProps选择 a string，但上述字符串在 any 上发生变化updateClass，这会导致您的所有卡片更新，因为选择state.game.cardClass会产生不同的值，这会触发连接组件的新渲染。

也许你想要的是识别选择的东西，即每张卡的 id，并在 中选择该 idmapStateToProps以避免读取更改，因为现在发生的情况如下：

Card A[className="card A"] == 派发后 ==> mapStateToProps => [className="card B"]
Card B[className="card A"] => dispatch('B') => mapStateToProps = > [className="卡片 B"]

B 正在更新 A 和 B 的状态，这就是发生额外渲染的原因

推荐阅读