Uncaught Typeerror: Cannot Read Property 'Type' of Undefined at Start of Switch Function

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

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

1 Answer

Your clicking action 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 clicking action.

However, the recommended use would be to modify your clicking action...

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.dispatch to dispatch an action. You do not need to pass the dispatch function from the component.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Robert Thorne

Robert Thorne

Automotive & Future Transportation Editor

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.

Share this article
Twitter Facebook Pinterest