未捕获的类型错误：在开关函数开始时无法读取未定义的属性“类型”

Posted 2023-02-22

【中文标题】未捕获的类型错误：在开关函数开始时无法读取未定义的属性“类型”

【英文标题】：Uncaught TypeError: Cannot read property 'type' of undefined at start of switch function

【发布时间】：2017-07-20 11:27:17

【问题描述】：

我正在尝试使用将我的应用程序从纯反应转移到 redux-react。我为 onClick 做了一个动作和减速器，但是在尝试以开发模式启动应用程序后，我收到了这个错误

Uncaught TypeError: Cannot read property 'type' of undefined at reducerDomMethods (manMethodsReducers.js:12) 

这是这一行

switch (action.type)   

这是我的代码

减速器

export default function reducerDomMethods(state=
isClicked: false,
, action) 
switch (action.type) 
    case "CLICK_OPEN": 
        return 
            ...state,
            isClicked: true
        
    

    case "CLICK_CLOSE": 
        return
            ...state,
            isClicked:false
        
    

        return state;
  

动作

export function clicking(isClicked) 

return function (dispatch) 

            if( isClicked === true)
                dispatch(type: "CLICK_OPEN",isClicked: true);
            else 
                dispatch(type: "CLICK_CLOSE",isClicked: false);
            
   

组合减速器

    import  combineReducers  from "redux"

    import cityName from "./apiReducers"
    import nameOfCity from "./apiReducers"
    import weatherDescription from "./apiReducers"
    import windSpeed from "./apiReducers"
    import temperature from "./apiReducers"
    import maxTemperature from "./apiReducers"
    import minTemperature from "./apiReducers"
    import isClicked from "./manMethodsReducers"

    export default combineReducers(
        cityName,
        nameOfCity,
        weatherDescription,
        windSpeed,
        temperature,
        maxTemperature,
        minTemperature,
        isClicked
    )

商店

import  applyMiddleware, createStore  from "redux"

import logger from "redux-logger"
import thunk from "redux-thunk"
import promise from "redux-promise-middleware"

import reducer from "./reducers"
import reducerDomMethods from "./reducers"

const middleware = applyMiddleware(promise(), thunk, logger())

export default createStore( reducer , reducerDomMethods, middleware)

连接

    import connect from "react-redux"

@connect((store) => 

    return 
       nameOfCity:store.nameOfCity.nameOfCity,
       weatherDescription:store.weatherDescription.weatherDescription,
       windSpeed:store.windSpeed.windSpeed,
       temperature:store.temperature.temperature,
       maxTemperature:store.maxTemperature.maxTemperature,
       minTemperature:store.minTemperature.minTemperature,
       isClicked:store.isClicked.isClicked,
      
     )

编辑：这是我导入发送操作的地方

        import React, Component from 'react';
        import SearchBar from '../components/SearchBar';
        import connect from "react-redux"
        import fetchWeatherData from "../actions/weather-apiActions";
        import clicking from '../actions/manMethodsActions'

        @connect((store) => 
            return 
                nameOfCity:store.nameOfCity.nameOfCity,
                weatherDescription:store.weatherDescription.weatherDescription,
                windSpeed:store.windSpeed.windSpeed,
                temperature:store.temperature.temperature,
                maxTemperature:store.maxTemperature.maxTemperature,
                minTemperature:store.minTemperature.minTemperature,
                isClicked:store.isClicked.isClicked,
            
        )

        class FormContainer extends Component 

            handleFormSubmit(e) 
                e.preventDefault();
                var cName = e.target.CityName.value;
                console.log(cName);
                let isClicking = false;
                this.props.dispatch(clicking(isClicking));
                this.props.dispatch(fetchWeatherData(cName));
            

            render() 

                return (


                    <div>
                    <form onSubmit=this.handleFormSubmit.bind(this)>
                        <label>this.props.label</label>


                        <SearchBar
                                name="CityName"
                                type="text"
                                value=this.props.cityName
                                placeholder="search"
                            />

                        <button type="submit" className="" value='Submit' placeholder="Search">Search</button>
                    </form>
                    </div>
                );
            
        

        export FormContainer;

【问题讨论】：

动作未定义。检查您是否正在发送它。

我是redux的菜鸟，我如何检查我是否没有在应用程序中触发它

您能否提供一个代码，用于导入和发送操作？

我用你问的代码编辑和添加了

你可以在reducer参数上使用action=。

【参考方案1】：

您的clicking 操作返回一个函数，并且您正在使用this.props.dispatch(clicking(isClicking)); 调度该函数。如果你想保持动作的嵌套结构，那么你应该将调度修改为this.props.dispatch(clicking(isClicking)());，它会自动调用从clicking动作接收到的函数。

但是，建议的用途是修改您的 clicking 操作...

export function clicking(isClicked) 
  dispatch( type: "CLICK_OPEN", isClicked );

请记住，您可以在操作文件中导入您的商店并使用store.dispatch 来调度操作。您不需要从组件中传递dispatch 函数。

【讨论】：

嗯，这意味着 dispatch 应该只在你调用它的函数时才被传递？