@nelicepriatniy

Почему в props передаётся undefined react redux?

при попытке передачи пропсов в компоненту по средствам использования connect в компоненту. При чём всё отрисовывается, проблемы появляются при скролле.
я подозреваю, что не так что то именно с функциями isHeaderBgTrue и isHeaderBgFalse в редюсере, но не понимаю что.
reducer:
const ISHEADERBG = 'IS_HEADER_BG_TRUE'
const ISHEADINGBGFALSE = 'IS_HEADING_BG_FALSE'

let initialState = {
    headerMenuListEN: [
        {
            name:'Solutions',
            id: 0,
        },
        {
            name:'Security',
            id: 1,
        },
        {
            name:'Integrations',
            id: 2,
        },
        {
            name:'Prices',
            id: 3,
        },
        {
            name:'About us',
            id: 4,
        }
    ],
    headerMenuListRU: [
        {
            name:'Решение',
            id: 0,
        },
        {
            name:'Защита',
            id: 1,
        },
        {
            name:'Интеграции',
            id: 2,
        },
        {
            name:'Цена',
            id: 3,
        },
        {
            name:'О нас',
            id: 4,
        }
    ],
    isHeaderBgTrue: false
    // headerMeluList: ['Solutions', 'Security', 'Integrations', 'Prices', 'About us'],
}

const headerReducer = (state = initialState, action) => {
    switch(action.type) {
        case ISHEADERBG: {
            return {
                ...state,
                isHeaderBgTrue: true,
            }
        }
        case ISHEADINGBGFALSE: {
            return {
                ...state,
                isHeaderBgTrue: false,
            }
        }
        default: {
            return {
                ...state
            };

        }
    }
}

export let isHeaderBgTrueActionCreator = ()=>{
    return {
        type: ISHEADERBG,
    }
}
export let isHeaderBgFalseActionCreator = ()=>{
    return {
        type: ISHEADINGBGFALSE,
    }
}

export default headerReducer

container:
import { connect } from 'react-redux';
import HeaderComponent from './HeaderComponent';
import { isHeaderBgFalseActionCreator, isHeaderBgTrueActionCreator } from '../../store/reducers/headerReducer';

let mapStateToProps = (state)=>{
    let langText = state.headerReducer.headerMenuListEN;
    if(state.langReducer.wicthLangSelect === "EN") {
        langText = state.headerReducer.headerMenuListEN;
    } else if(state.langReducer.wicthLangSelect === "RU") {
        langText = state.headerReducer.headerMenuListRU;
    }
    return {
        headerMenuList: langText,
        headerIsBg: state.headerReducer.isHeaderBgTrue,
    }
}

let mapDispatchToProps = (dispatch)=>{
    // alert(dispatch)
    // debugger
    return {
        isHeaderBgTrue: ()=>{dispatch(isHeaderBgTrueActionCreator())},
        isHeaderBgFalse: ()=>{dispatch(isHeaderBgFalseActionCreator())}
    }
}

let HeaderComponentContainer = connect(mapStateToProps, mapDispatchToProps)(HeaderComponent)
export default HeaderComponentContainer;

component:
import s from './HeaderComponent.module.scss'
import logo from './../../assets/icons/logo.svg'
import LangComponentContainer from './LangComponent/LangComponentContainer';

const HeaderComponent = (props) => {
    // alert(props)
    let headerClasses =  [s.headerBgFalse, s.headerBgTrue].join(' ');
    window.onscroll = () => {
        if(props.isHeaderBgTrue != undefined && props.isHeaderBgFalse) {
            if (window.scrollY > 100) {
                props.isHeaderBgTrue()
            }
            else {
                props.isHeaderBgFalse()
            }
        }
    }
    if(props.headerIsBg) {
        headerClasses =  [s.headerBgFalse, s.headerBgTrue].join(' ');
    } else {
        headerClasses =  [s.headerBgFalse].join(' ');

    }
    return (
        <header className={headerClasses}>
            <div className={s.container + ' container'}>
                <img src={logo} alt="" className={s.logo} />
                <div className={s.menu}>
                    <ul className={s.meluList}>
                        {props.headerMenuList.map(el => <li className={s.Item} key={el.id}>{el.name}</li>)}
                    </ul>
                </div>
                <LangComponentContainer />
                <button className={s.cart}>
                    <svg xmlns="http://www.w3.org/2000/svg" className={s.cartImg} viewBox="0 0 24 24" fill="none">
                        <path d="M16 18C16.5304 18 17.0391 18.2107 17.4142 18.5858C17.7893 18.9609 18 19.4696 18 20C18 20.5304 17.7893 21.0391 17.4142 21.4142C17.0391 21.7893 16.5304 22 16 22C15.4696 22 14.9609 21.7893 14.5858 21.4142C14.2107 21.0391 14 20.5304 14 20C14 19.4696 14.2107 18.9609 14.5858 18.5858C14.9609 18.2107 15.4696 18 16 18ZM16 19C15.7348 19 15.4804 19.1054 15.2929 19.2929C15.1054 19.4804 15 19.7348 15 20C15 20.2652 15.1054 20.5196 15.2929 20.7071C15.4804 20.8946 15.7348 21 16 21C16.2652 21 16.5196 20.8946 16.7071 20.7071C16.8946 20.5196 17 20.2652 17 20C17 19.7348 16.8946 19.4804 16.7071 19.2929C16.5196 19.1054 16.2652 19 16 19ZM7 18C7.53043 18 8.03914 18.2107 8.41421 18.5858C8.78929 18.9609 9 19.4696 9 20C9 20.5304 8.78929 21.0391 8.41421 21.4142C8.03914 21.7893 7.53043 22 7 22C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20C5 19.4696 5.21071 18.9609 5.58579 18.5858C5.96086 18.2107 6.46957 18 7 18ZM7 19C6.73478 19 6.48043 19.1054 6.29289 19.2929C6.10536 19.4804 6 19.7348 6 20C6 20.2652 6.10536 20.5196 6.29289 20.7071C6.48043 20.8946 6.73478 21 7 21C7.26522 21 7.51957 20.8946 7.70711 20.7071C7.89464 20.5196 8 20.2652 8 20C8 19.7348 7.89464 19.4804 7.70711 19.2929C7.51957 19.1054 7.26522 19 7 19ZM18 6H4.27L6.82 12H15C15.33 12 15.62 11.84 15.8 11.6L18.8 7.6C18.93 7.43 19 7.22 19 7C19 6.73478 18.8946 6.48043 18.7071 6.29289C18.5196 6.10536 18.2652 6 18 6ZM15 13H6.87L6.1 14.56L6 15C6 15.2652 6.10536 15.5196 6.29289 15.7071C6.48043 15.8946 6.73478 16 7 16H18V17H7C6.46957 17 5.96086 16.7893 5.58579 16.4142C5.21071 16.0391 5 15.5304 5 15C4.9997 14.6607 5.08573 14.3269 5.25 14.03L5.97 12.56L2.34 4H1V3H3L3.85 5H18C18.5304 5 19.0391 5.21071 19.4142 5.58579C19.7893 5.96086 20 6.46957 20 7C20 7.5 19.83 7.92 19.55 8.26L16.64 12.15C16.28 12.66 15.68 13 15 13Z" fill="white" />
                    </svg>
                    <p className={s.cartText}>Cart</p>
                </button>
            </div>
        </header>
    )
}
export default HeaderComponent;
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы