React Redux переключение логическое - PullRequest
0 голосов
/ 19 июня 2019

Проверьте рабочий фрагмент здесь введите описание ссылки здесь

Если вы нажмете кнопку, она переместится на следующую страницу, и когда вы увидите название страницы «MemoryPageTwo» в заголовкеон покажет карты памяти, на которых игрок мог щелкнуть (это событие щелчка должно иметь функцию переключения, и в этом случае это ошибка).

В текущем случае ниже я хочу добавить переключатель на основе индекса внутри функции карты, чтобы добавить функцию переворачивания карты памяти, я хочу сделать это с помощью редуктора ниже.Как мне исправить это в JSX и редукторе, чтобы сделать это переключение?

onst MemoryPageTwo = ({ chosenImage, memoryCardCheck, flipped}) => {
    let memoryCardsOutput = chosenImage.map((card, index) => {

        return (
            <div key={index}>
                
                <img 
                    className={card.flipped ? 'memory-card flipped' : 'memory-card unflipped' } 
                    alt={card.name}
                    src={card.imageUrl}
                    onClick={() => memoryCardCheck(index)}
                />
            </div>
        )   
    });

    return (
        <div>
            MemoryPageTwo
            { memoryCardsOutput }
        </div>
    )
}

const mapDispatchToProps = dispatch => ({
    memoryCardCheck: index => dispatch(memoryCardCheck(index))
})

const mapStateToProps = state => {
    console.log(state.app.memoryCards[0]) // 
    return {
        chosenImage: state.app.memoryCards || []
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(MemoryPageTwo);

REDUCER
const initialState = {
    flipped: false
}; 

const reducer = (state = initialState, { type, index }) => {
    switch (type) {
    case types.CARD_CHECK: {
        console.log(index, state.flipped); // output for example: 0 false
        
    default:
            return state;
    }
}


console.log(state.app.memoryCards[0]) outputs the following objects and as you might see flipped keyname should be added in the className boolean. 
 
flipped: false
imageName: "klm1"
imageUrl: "../assets/klm1.jpeg"
level: 1
maxPassengers: 268
maxSpeed: 880
name: "Airbus"
type: "A330-200"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...