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

Uncaught TypeError: Cannot read property 'type' of undefined at start of switch function

提问by OunknownO

I'm trying to use move my app to redux-react from pure react. I made an action and reducer for onClick but after trying to start the app in dev mode I get this error

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

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

which is this line

这是这条线

switch (action.type) {  

This is my code

这是我的代码

reducer

减速器

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

action

行动

export function clicking(isClicked) {

return function (dispatch) {

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

combine reducer

联合减速机

    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
    })

store

店铺

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)

connect

连接

    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,
      }
     })

EDIT: This is where I am importing sending the action

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

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

回答by Deividas Karzinauskas

Your clickingaction returns a function and you are dispatching that function with this.props.dispatch(clicking(isClicking));. If you want to keep the nested structure of the action then you should modify the dispatch to this.props.dispatch(clicking(isClicking)());which automatically calls the function received from clickingaction.

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

However, the recommended use would be to modify your clickingaction...

但是，推荐的用途是修改您的clicking操作...

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

Bear in mind that you can import your store in the actions file and use store.dispatchto dispatch an action. You do not need to pass the dispatchfunction from the component.

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