Uncaught TypeError：スイッチ機能の開始時に 'type'プロパティが未定義であると読み取れません。

Question

純粋な反応から還元反応するように私のアプリを使用しようとしています。私はonClickのためのアクションと減速をしたが、DEVモードでアプリを起動しようとした後、私はこのエラーを取得する

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

を送る輸入しています場所です

Answer 1

clickingアクションは関数を返し、その関数をthis.props.dispatch(clicking(isClicking));でディスパッチしています。アクションのネストされた構造を保持したい場合は、ディスパッチをclickingアクションから受け取った関数を自動的に呼び出すthis.props.dispatch(clicking(isClicking)());に変更する必要があります。あなたがアクションファイルでお店をインポートし、アクションをディスパッチするstore.dispatchを使用することができます念頭に置いて

ただし、推奨される使用は、あなたのclickingアクションを修正するだろう...

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

ベア。コンポーネントからdispatch関数を渡す必要はありません。