一次有趣的ant-design與后端數據交互的使用

本文轉載自查看原文 2018-10-31 22:16 3813 react

最近有個需求是新聞時間排序與點擊量排序，數據庫中存儲的新聞是按照時間順序排序的，從后台數據中取出數據，在前端進行頁面展示即可。
我用到了ant-design中的Tabs切換頁,樣式大概如下圖。

其實這個項目里面最令我欣喜的是reducer中間件的封裝，無需通過fetch請求數據這些，而是使用另外的封裝中間件的方式
當然在store里面有引用redux-thunk

項目首先是使用了三種請求方式

在中間件中使用這三種方式，並且封裝了callApi ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215044212-402436421.png) 我們將方法寫在action中，callAPI就是我們請求的后端的數據 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215212387-148455378.png) 在我們的reducer中，我們會通過type暴露這些數據，並且返回我們的請求結果 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215305490-1766090911.png)

不要忘記合並我們的reducer方法

在我們的文件中別忘了使用我們的這些方法 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031215447337-1825589246.png) 再說說我在這個數據中用到的方法吧通過map循環數據,通過es7的Decorators語法拿到請求數據 ![](https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181031221534268-1407592676.png)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ant-design中使用jQuery react使用ant-design組件庫使用 ant-design/pro-table ant-design訪問不了 @ant-design/icons [RN] React Native 使用阿里 ant-design ant-design 基礎格式 React-leaflet在ant-design pro中的基本使用 webpack構建ant-design 一次非常有趣的 SQL 優化經歷