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};
操作未定義。檢查你是否發送它。 – c69
我的菜鳥在REDX如何檢查我是否不在應用程序中觸發它 – OunknownO
您可以提供一個代碼,用於導入和發送操作? –