web-dev-qa-db-ja.com

Uncaught TypeError：スイッチ関数の開始時に未定義のプロパティ 'type'を読み取れません

私のアプリを使用して、純粋な反応からredux-reactにしようとしています。 onClickのアクションとリデューサーを作成しましたが、アプリを開発モードで起動しようとした後、このエラーが発生しました

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};
javascriptreactjsecmascript-6reduxreact-redux
4
OunknownO

clickingアクションが関数を返し、その関数をthis.props.dispatch(clicking(isClicking));でディスパッチしています。アクションのネストされた構造を保持したい場合は、clickingアクションから受け取った関数を自動的に呼び出すthis.props.dispatch(clicking(isClicking)());へのディスパッチを変更する必要があります。

ただし、clickingアクションを変更することをお勧めします...

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

ストアをアクションファイルにインポートしてstore.dispatchアクションをディスパッチします。コンポーネントからdispatch関数を渡す必要はありません。

4
Deividas Karzinauskas