react-redux-express異步先後端數據交互(面向初學者,高手勿進)

花了整整三天的時間來解決一個很是很是小的問題.想要把一點心得體會記錄下來.
首先是問題的提出:前端若是是react,後端是express,如何進行數據的交互.

1.整體思路

之前接觸express的時候前端模板用的是ejs,那時候就有些不理解的地方.最爲不理解的幾個問題是:前端和後端怎麼配合?特別是前端特別複雜的時候,難道仍是全用模板嗎?若是前端用了框架呢?這些問題對於大部分開發者或者非初級學習者來講都不算問題,可是對於初學者來講,若是不能完整地知道這些概念和數據流動的方式,學起來就會有些"心虛".

因此在接觸了express和react 以後,我強烈地想知道二者是怎麼進行數據的交互的.我想要的技術棧是:react-redux-webpack-express .在google和github上找了好久都沒有找到合適的,最後才發現,其實官網的那個已是最好的例子Async.

目前獲得的比較好的方式是用異步的方式,經過前端ajax來發出請求,後端接收並處理請求,返回相應的數據(在這裏不講述服務器渲染).在這裏的ajax若是引入jq會顯得太笨重,因此按照官網的方法用 isomorphic-fetch

而由於引入了redux,因此要把ajax寫在哪裏是一個問題. google了一下,發現你們都認爲寫在action裏面最好(官網也是這麼作的),因此就直接這麼作吧.(跟着官網沒錯)

下面就以一個很是很是簡單的例子爲切入點,功能以下:有一個input和一個button,在input裏面輸入,點擊按鈕,把input的內容上傳服務器(POST). 同時下面有一個列表,從服務器上獲取數據並在react中渲染(GET). 很是很是很是簡單.

2.GET方法

把ajax所有寫在action裏面, 異步action須要用到中間件. 有關中間件最好的文章我認爲是這一篇, 裏面講了applyMiddleware 的實現原理和例子(其實有點像俄羅斯套娃,把本來的dispatch慢慢增強,好比能夠用logger加一點日誌輔助找bug) 這裏要用到一個叫作thunk的中間件(實現原理很簡潔,能夠本身找來琢磨)

下面的代碼從服務器中獲取列表. 其中的fetch的用法能夠看這裏, 這裏也用到了promise對象用於處理異步事件,這個能夠看阮一峯大神的這篇文章.

export const fetchList = () => {
    return dispatch => {
        dispatch({ type:"REQUEST_LIST" })
        return fetch(`/list`, {
            header: {
                "dataType": "json"
            }
        })
            .then(response => {
                return response.json()
            })
            .then(json => {
                dispatch(receiveList(json.items))
            }
        )
    }
}

3.POST方法

POST方法與GET大同小異,不過在server寫代碼的時候要用上body-parser, 否則有可能請求會變成undefined,寫法是這樣的.

具體的代碼以下: POST方法相對複雜一點點.

export const postAddItem = (text) => {
    return dispatch => {
        dispatch({type: "loadAddItem", text})
        fetch('/send', {
            method: 'POST',
            headers: {
                'Content-Type': "application/json",
                'Accept': "application/json",
                'Content-Type': "application/json"
            },
            body: JSON.stringify({ item: text })
        }).then(res => {
            if(res.ok) {
                dispatch({ type: "ADD_ITEM", text })
                console.log("POST SUCCESS");
            } 
        }, e => {
            dispatch({type: "loadAddItem", text})
            alert("POST ERROR");
        })
    }
}

這些代碼都是根據官網上Async的代碼改的.
因此要真正掌握redux, 官網文檔和例子要熟讀啊...

4.關於調試

關於調試我沒有什麼值得分享的(我也在找比較方便的調試方法TAT,跪求推薦!!), 不過一個這幾天下來總結了"肉眼debug"的思路就是: 看數據怎麼流,從哪裏開始變得不符合要求.以前在寫的時候就是connect的地方開始有問題,結果死活找不出爲何渲染不出來...明明在logger上看到已經獲取到了數據...

5.總結

我的感受若是要"打通先後端"(起碼理解吧),必定要認真理解redux,基本概念,異步,中間件(整個官網的內容很豐富,要多讀..) 不過基礎也很重要!最基礎的es6,ajax等必定要會...
本身寫的粗糙的例子代碼在此

(第一次寫文章,本人是小白,有什麼說得不對的很差的,感謝提出!)