問題描述

在前端頁面發(fā)請求到后端，控制臺報出錯誤createStore.js:152 Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

矛盾點

根據(jù)提示，actions 返回值需要是一個對象，檢查代碼發(fā)現(xiàn)確實是一個對象，按照代碼走的流程檢查代碼，但沒有發(fā)現(xiàn)問題，不知道問題是出在了哪里

問題解決

1. 復(fù)制錯誤信息到瀏覽器，沒有找到有價值的答案，自己開始逐步的查找
2. 首先在action 發(fā)異步請求之前console.log ,發(fā)現(xiàn)是可以打印出值的，也就是說值可以正常從container傳遞到action, 那么問題是在action發(fā)請求從前端到后端的的過程中，還是在請求返回后到reducer 的過程中？
3. 首先，排除干擾，注釋到發(fā)請求的過程，將請求的返回值定義為定值，目的是排除因為請求本身的導(dǎo)致出錯。注釋后刷新頁面，發(fā)現(xiàn)錯誤還在，那么問題肯定不是這個請求導(dǎo)致的。
4. 思考從action 到reduce 的過程，中間起橋梁作用的是middleware，middleware 的數(shù)據(jù)流動過程為action ---> dispatcher ---> middleware 1 ---> middleware 2 ---> reducers,那么問題可能是middleware 出錯了嗎？
5. 檢查middleware的用法，果然是這里寫的不對，修改后解決了問題

反思

解決問題的方法

按照數(shù)據(jù)的流程，從頭開始，精簡代碼，注釋掉不相關(guān)的干擾代碼，如果注釋后代碼ok ,那么問題就在被注釋的里面，否則問題就在現(xiàn)有的代碼里，抽絲剝繭，一步步的排除。