react-redux-express非同期前後端データインタラクション(初心者向け、上級者は入らない)

非常に小さな問題を解決するのに丸3日かかりましたお菓子の体験を記録したいです.まず問題の提出:フロントエンドが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などは必ず...自分で書いた粗い例コードはここにあります
△初めて文章を書きましたが、私は白です.何か悪いことがあったら、ありがとうございます.