قالب وردپرس درنا توس
Home / IOS Development / Reag Data Layer – Part 4: Backend Data

Reag Data Layer – Part 4: Backend Data



This post is the fourth part of an 8-part series that delves deep into how to build a robust real-world frontend app data layer. See the previous sections here:

In this post, we switch from storing our data only locally in memory to reading it from the web service and writing it back to it. This step moves our app to a point where we could actually use it for production. We look at patterns we can use to organize our web service requests, status reporting, and data returned.

If you want, you can download the app at the end of the post.

Configuring Thunk [19659005] To connect to a web service, we need a mechanism to handle our asynchronous web requests. For our purposes, the Redux Thunk Library will do well. It allows you to run asynchronous code in your Redux creators and sends actions after they are finished. Install it:

Next, add it to your store setup in src / store / index.js :

  import {createStore} from & # 39; redux & # 39 ;;
  + import {createStore, applyMiddleware, composing} from & # 39; redux & # 39 ;;
 import {devToolsEnhancer} from redux-devtools extension & # 39 ;;
 + import thunk from & # 39; redux-thunk & # 39 ;;
 import {persistStore, persistReducer} from & # 39; redux-persist & # 39 ;;
import storage from & # 39; redux-persist / lib / storage & # 39 ;;
import root Reduce from & # 39; ./ reducers & # 39 ;;
...
const store = createStore (
persistedReducer,
 - devToolsEnhancer (),
  + composing (
+ applyMiddleware (thunk),
+ devToolsEnhancer (),
+)
);

Instead of being able to send devToolsEnhancer () directly, we now need to use thunk middleware, so we use the Redux compose () method to compose two amplifiers into a single amplifier to pass.

Loading data

Now it's time for us to load data from the service.

First, let's add a creator to do it. Add the following to shop / games / actions.js :

  + import api from & # 39; ../ api & # 39 ;;
+
+ export const STORE_GAMES = & # 39; STORE_GAMES & # 39 ;;
 export const ADD_GAME = & # 39; ADD_GAME & # 39 ;;

 + export constloadGames = () => async (send) => {
+ const {data: responseBody} = waiting api.get (& # 39; / games & # 39;);
+ transmission ({
+ type: STORE_GAMES,
+ games: responseBody.data,
+});
+};
+
 export const addGame = (title) => {
return {

When using Redux Thunk, action creator functions return another function, which takes a shipment parameter that can be used to send actions. We use the arrow function syntax, so we can briefly show a function that returns another function. We also use ECMAScript async / waiting for syntax to simplify the asynchronous network call. We send a GET request to the / game endpoint. We destroy the response object and assign the data property to a responseBody variable. You can see examples of JSON: API response formats on https://sandboxapi.bignerdranch.com/ ; Here is an example of a response to GET / games :

  {
"data" :
[["Id": "1
"



Source link