Реагируйте на работу от Redux. TypeError: невозможно прочитать свойство 'type' неопределенного - PullRequest
Новая
       116

Реагируйте на работу от Redux. TypeError: невозможно прочитать свойство 'type' неопределенного

0 голосов
/ 14 июля 2020

Столкнулся с такой проблемой, делал по шаблону, но что-то пошло не так. Проект с файлами можно найти на GitHub 

TypeError: Cannot read property 'type' of undefined
DataReducer
D:/React_learn/Gitwooder/Wooder/wooder/src/Redux/DataReducer.js:20
  17 | 
  18 | const DataReducer = (state = initialState , action) => {
  19 | 
> 20 |  switch(action.type){
  21 |      case 'HIDE-MENU' :
  22 |      console.log('doschlo')
  23 |      return{

1 Ответ

0 голосов
/ 14 июля 2020

Ошибка говорит о том, что у вас нет свойства типа в вашем действии.

Вы должны отправить действие, подобное этому: dispatch({type: 'HIDE-MENU'})

Если он по-прежнему не работает, я хотел бы, чтобы вы поделились своей трассировкой стека, чтобы мы могли видеть, откуда было отправлено действие

EDIT:

Ваш mapDispatchToProps неверен. Каждое свойство в mapDispatchToProps должно быть функцией, которая использует отправку, переданную с помощью response-redux. Помните, что результат сопоставления в конечном итоге будет прикреплен к реквизитам в компоненте. Предлагаю вам перечитать документацию: https://react-redux.js.org/api/connect

Это правильный способ: 

import React from 'react';
import classes from './Header.module.css';
import { connect } from 'react-redux';

//***** CHANGE 1 *****
import { HidemenuAC } from '../../Redux/DataReducer';


const Header = (props) =>{

    const Menu_view = () =>{
        props.Hidemenu(true)
    }

    return <header className={classes.Header}>
        <div className={classes.Header_menu} onClick={Menu_view}>
            <div>
                <div className={classes.line}></div>
                <div className={classes.line}></div>
                <div className={classes.line}></div>
            </div>
            <div className={classes.Header_menu_text} tabIndex="0">MENU</div>
        </div>
        <div className={classes.Big_line}></div>
        <ul className={classes.HeaderUl}>
            <li>HOME</li>
            <li>PRODUCTS</li>
            <li>ABOUT</li>
        </ul>
        <div className={classes.Header_circle} >i</div>
        <div className={classes.Header_arrow}>EN &#9660;</div>
    </header>
}

const mapStateToProps = (state) => {
    return{
       Menu:state.Data.Menu
    }    
}

//***** Change 2 ******
const mapDispatchToProps = (dispatch) => ({
    Hidemenu: (value) => dispatch(HidemenuAC(value))
})

//***** Change 3 ******
export default connect(mapStateToProps, mapDispatchToProps)(Header);
...