2017-03-01 80 views
1

我試圖使用將我的應用程序移動到redux - 從純反應開始反應。我爲的onClick動作,減速,但嘗試啓動在開發模式下的應用程序後,我得到這個錯誤Uncaught TypeError:無法讀取開關功能undefined的屬性'type'

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

操作未定義。檢查你是否發送它。 – c69

+0

我的菜鳥在REDX如何檢查我是否不在應用程序中觸發它 – OunknownO

+0

您可以提供一個代碼,用於導入和發送操作? –

回答

2

您的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函數。

相關問題