Reduxを使用してコンポーネントの1つのインスタンスのみを更新するにはどうすればよいですか？

debugcn 投稿 Dev

ダスティン

Reduxを使用してカードコンポーネントを更新し、クリック時に色を無効にして変更しようとしています。Reduxはアクションを正常にディスパッチしますが、クリックされたカードだけでなく、すべてのカードを更新します。各カードには、単語と値を保持するオブジェクトが関連付けられています。値は、クリックしたときに色を変更するために使用するclassNameです。

成分

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

Victor_Maciel

すべてのカードコンポーネントはcardClass、州内の同じフィールドを消費しています。この行で変更すると：

cardClass: ['card', payload.value].join(' ')

このフィールドを消費しているすべてのカードは、クラスが更新されています。同じことがisDisable現場でも起こります。

自分の州のカードごとに1つのオブジェクトを作成する必要があります。これが私の実装です（テストされていません）：

const initialState = {
    cards: []
};

export default function (state = initialState, action) {
    const { type, payload } = action;
    switch (type) {
        // create a card object for each word
        case SET_WORDS: {
            return {
                ...state,
                cards: payload.map(word => {
                    return { word: word, cardClass: "card", isDisabled: false }
                })
            };
        }   

        case UPDATE_CARD:
            // here i'm using the wordObj.word passed as payload
            // to identify the card (i recommend to use an id field) 
            const cardIndex = state.cards.findIndex(card => card.word === payload.word);
            // get the current card
            const card = state.cards[cardIndex];
            // create an updated card object obeying the immutability principle
            const updatedCard = { ...card, isDisabled: true, cardClass: ['card', payload.value].join(' '), }
            return {
                ...state,
               cards: [
                   ...state.cards.slice(0, cardIndex), // cards before
                   updatedCard,
                   ...state.cards.slice(cardIndex + 1) // cards after
               ]
                
            };

        default:
            return state;
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]