遗漏的类型错误：无法读取属性“类型”的不确定阵营路由器终极版

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)。使用它我几乎可以立即找到原因。一个非常有价值的技能让我的生活变得更加轻松。