[解決済み] Uncaught TypeError: switch関数の先頭で未定義のプロパティ'type'を読み取れない

質問

私は自分のアプリを純粋なreactからredux-reactに移行しようとしています。onClick用のアクションとreducerを作成しましたが、開発モードでアプリを起動しようとすると、このエラーが発生します。

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

EDIT: ここで、アクションを送信するインポートをしています。

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

解決方法は？

あなたの 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 関数をコンポーネントから呼び出すことができます。