遺漏的類型錯誤：無法讀取屬性「類型」的不確定陣營路由器終極版

Question

使用「反應路由器-DOM」：「^ 4.1.2」，「反應路由器 - 終極版」：「^ 5.0.0-alpha.6 「我得到按標題‘遺漏的類型錯誤：無法讀取屬性‘類型’的未定義在執行console.log陣營路由器終極版’（）重定向後瞬間完成。 截圖顯示它不是用行動觀察到的包含有效載荷數據的問題。有效載荷包含表單數據（值）和歷史記錄對象。 我設法給他們，然後通過使用mergeMap代替ES6地圖，因爲我處理的觀測量遞歸函數的方法捕捉它們。 link to the repo

import * as ActionTypes from "../ActionTypes"; 
    import { createPostFulfilled, fetchPosts, fetchPostsFulfilled, fetchPostsWithIdFulfilled, changeRoute } from "../actions"; 
    import {store, history} from "../configureStore"; 
    import { Observable } from "rxjs/Observable"; 
    import "rxjs/add/observable/combineLatest"; 
    import "rxjs/add/operator/debounceTime"; 
    import { concat as concat$ } from "rxjs/observable/concat"; 
    import { from as from$ } from "rxjs/observable/from"; 
    import { of as of$ } from "rxjs/observable/of"; 
    import "rxjs/add/operator/map"; 
    import "rxjs/add/operator/mergeMap"; 
    import "rxjs/add/operator/startWith"; 
    import "rxjs/add/operator/filter"; 
    import "rxjs/add/operator/switchMap"; 
    import "rxjs/add/operator/concatMap"; 
    import "rxjs/add/operator/catch"; 
    import "rxjs/add/observable/dom/ajax"; 
    import {push} from "react-router-redux"; 
    const ROOT_URL = "http://reduxblog.herokuapp.com/api"; 
    const API_KEY = "key=davide123"; 

    export const fetchPostsEpic = (action$) => { 

     return action$.filter((action$)=> action$.type === ActionTypes.FETCH_POSTS) 
      .mergeMap(action$ => { 
       return Observable.ajax.getJSON(`${ROOT_URL}/posts/?${API_KEY}`) 
        .map(response => fetchPostsFulfilled(response), (err) => {console.log(err);}); 
      }); 
    }; 

    export const fetchPostsWithIdEpic = (action$) => { 
     return action$.filter((action$)=> action$.type === ActionTypes.FETCH_POSTS_WITH_ID) 
     .mergeMap(action$ => { 
      return Observable.ajax.getJSON(`${ROOT_URL}/posts/?${action$.payload}&${API_KEY}`) 
       .map(response => fetchPostsWithIdFulfilled(response), (err) => {console.log(err);}); 
     }); 
    }; 

    export const createPostEpic = (action$) => { 
     const actionVectorizer = ((action$) => { 
      if (action$) 
      return action$.isArray() ? [].concat(...action$.mergeMap(x => actionVectorizer(x))) : action$; 
     })(); 
     return action$.filter((action$)=> action$.type === ActionTypes.CREATE_POST) 
      .mergeMap(action$ => { 
        console.log("action$ is..."); 
        console.log(action$); 
        let { values, history } = action$.payload; 
        return Observable.ajax.post(`${ROOT_URL}/posts/?${API_KEY}`, values) 
          .map(
           (data) => { 
            if (data.status === 201) { 
             console.log("Success status", data.status); 
             history.push("/"); 
             // return createPostFulfilled(data.status); 
            } 
            else {console.log("Server error is", data.status);} 
           }, 
           (err) => {console.log(err);} 
          ); 
      }); 
    }; 

Answer 1

裏面createPostEpic你映射了Ajax調用什麼（不確定），因爲你的行動的創建者調用和返回是註釋掉的結果，所以你的史詩般的最終發射值undefined：

history.push("/"); 
// return createPostFulfilled(data.status); 

undefined即值將被分派和終極版，可觀察到的第一個並將它傳遞給任一下一中間件（或根減速器）。接下來是In your case, react-router-redux middleware，所以它接收它。

然而，反應路由器 - 終極版預計只有真正的行動，所以錯誤，因爲it tries to look up action.type但作用是不確定的。

---

我覺得你真的很喜歡學習更多關於Chrome的強大的調試工具，比如它能夠Pause on Uncaught Exceptions (or even Caught ones)。使用它我幾乎可以立即找到原因。一個非常有價值的技能讓我的生活變得更加輕鬆。