未捕获的TypeError:无法读取属性'键入'在开关功能开始时未定义

时间:2017-03-01 08:22:05

标签: javascript reactjs ecmascript-6 redux react-redux

我试图使用移动我的应用程序来进行还原反应。我为onClick做了一个动作和减速器但是在尝试以开发模式启动应用程序后我得到了这个错误

True

是这一行

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

1 个答案:

答案 0 :(得分:7)

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