An interesting ant-design interaction with backend data

Recently, news are sorted by time and clicks. News stored in the database are sorted by time order. Data is retrieved from the background data and displayed on the front-end page.
I used the tabs switch page in ant-design. The style is like.

In fact, the most gratifying thing about this project is the encapsulation of the reducer middleware, which does not need to request data through fetch. Instead, it uses another method of encapsulating the middleware.
Of course, Redux-thunk is referenced in the store.

The project uses three request methods first.




These three methods are used in middleware and callapi is encapsulated.






We write the method in action, and callapi is the data at the backend of the request.

! [] (Https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215504862-1545352272.png)

In our CER, we expose the data through type and return our request results.

Do not forget to merge our CER Method

! [] (Https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030215844812-1960971869.png)

Do not forget to use these methods in our files.

! [] (Https://img2018.cnblogs.com/blog/1037363/201810/1037363-20181030220118887-1234711062.png)

Let's talk about the methods I used in this data.
GET request data through map and es7 decorators syntax

How to find the values?

What we want is to display the latest 5 News

Next, click the details event to go to the details page.

An interesting ant-design interaction with backend data