react-redux-express异步前后端数据交互(面向初学者,高手勿进)

2024年2月2日 314次阅读 来源: harryfyodor

花了整整三天的时刻来处置惩罚一个异常异常小的题目.想要把一点心得体会记录下来.
首先是题目的提出:前端假如是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等一定要会…
本身写的粗拙的例子代码在此

(第一次写文章,本人是小白,有什么说得不对的不好的,谢谢提出!)

    原文作者：harryfyodor
    原文地址: https://segmentfault.com/a/1190000005906458
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞