Uncaught TypeError: Cannot read property 'Typ' undefined beim start des switch-Funktion
Ich versuche, meine app zu redux-reagieren, aus reinem reagieren. Ich machte eine Aktion und reducer für onClick, aber nach dem Versuch die app zu starten im dev-Modus bekomme ich diesen Fehler
Uncaught TypeError: Cannot read property 'type' of undefined at reducerDomMethods (manMethodsReducers.js:12)
ist diese Zeile
switch (action.type) {
Dies ist mein code
reducer
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;
}
}
Aktion
export function clicking(isClicked) {
return function (dispatch) {
if( isClicked === true){
dispatch({type: "CLICK_OPEN",isClicked: true});
}else {
dispatch({type: "CLICK_CLOSE",isClicked: false});
}
}
}
kombinieren reducer
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
})
store
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)
verbinden
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: Dies ist, wo ich bin, importieren, versenden die Aktion
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};
Action ist nicht definiert. Prüfen Sie, ob Sie senden.
ich rookie bei redux wie kann ich überprüfen, ob ich nicht der Auslöser dafür in der app
Können Sie uns einen code, wo Sie den Import und den Versand der Aktion?
Ich bearbeitet und mit zusätzlichen code, den Sie gefragt
ich rookie bei redux wie kann ich überprüfen, ob ich nicht der Auslöser dafür in der app
Können Sie uns einen code, wo Sie den Import und den Versand der Aktion?
Ich bearbeitet und mit zusätzlichen code, den Sie gefragt
InformationsquelleAutor OunknownO | 2017-03-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihre
clicking
Aktion wieder eine Funktion und Aufgabe, die Funktion mitthis.props.dispatch(clicking(isClicking));
. Wenn Sie möchten, um die geschachtelte Struktur der Handlung, dann sollten Sie ändern den Versand anthis.props.dispatch(clicking(isClicking)());
die ruft automatisch die Funktion empfangen vonclicking
Aktion.Jedoch die empfohlene verwenden, wäre eine änderung Ihrer
clicking
Aktion...Bedenken, die Sie importieren können Sie Ihren store in der actions-Datei, und verwenden
store.dispatch
Versand eine Aktion. Sie nicht brauchen, um passieren diedispatch
Funktion der Komponente.dispatch
sollten nur weitergegeben werden mit, Nur wenn Ihr eine Funktion, die Sie anrufen ?InformationsquelleAutor Deividas Karzinauskas