Abrufen von Daten mit Redux-Aktionen

Question

Ich habe intern ein Problem mit dem Strukturieren meiner Redux-Aktionen, die Daten über eine Rest-API abrufen.

Ich Abrufen einer Vielzahl von Daten wie

• aller Beiträge veröffentlicht
• ein singulärer Beitrag
• alle aktuellen Benutzer
• Suchergebnisse

Ich frage mich, ob ich erstellen eine Aktion, die die Daten von jedem Endpunkt holt oder wenn ich eine singuläre Abrufaktion erzeuge, die die Daten von einem gelieferten Router holt e?

Aktuelle Umsetzung:

function requestPosts(site) { 
return { 
    type: REQUEST_POSTS, 
    site 
} 

function fetchPosts(site) { 
return dispatch => { 
    dispatch(requestPosts(site)) 
    return fetch(`http://notareallink.com/posts`) 
     .then(response => response.json()) 
     .then(json => dispatch(receivePosts(site, json))) 
} 

function requestPost(site) { 
return { 
    type: REQUEST_POST, 
    site 
} 

function fetchPost(site) { 
return dispatch => { 
    dispatch(requestPost(site)) 
    return fetch(`http://notareallink.com/post/post-id`) 
     .then(response => response.json()) 
     .then(json => dispatch(receivePost(site, json))) 
} 

function requestUsers(site) { 
return { 
    type: REQUEST_USERS, 
    site 
} 

function fetchUsers(site) { 
return dispatch => { 
    dispatch(requestUsers(site)) 
    return fetch(`http://notareallink.com/users`) 
     .then(response => response.json()) 
     .then(json => dispatch(receiveUsers(site, json))) 
} 

Für mich fühlt sich das wie eine Last von doppeltem Code im Grunde das gleiche tun (Fetching die Daten vom Endpunkt).

Ist dies der richtige Weg, oder sollte ich eine singuläre Aktion erstellen, die die Daten holt und die relevante Route weiterleitet?

Es tut mir leid, wenn das nicht sehr klar ist, aber ich versuche, meinen Kopf darum zu wickeln, wie ich dies austippe.

Answer 1

All dies sind nur Funktionen, die eine andere Funktionen aufrufen können, um wiederholende Aufgaben ohne Code-Duplizierung zu behandeln.

Zuerst müssen Sie wiederholt fetch Anrufe extrahieren.

const callAPI = url => fetch(`http://notareallink.com/${url}`).then(res => res.json()) 

Um zu vermeiden, wiederholende Aktion Dispatching können Sie Middlewares verwenden. Es scheint, Sie haben bereits thunk Middleware. Sie können Ihre eigenen hinzufügen oder ein Paket verwenden.

const promiseMiddleware = ({dispatch}) => next => action => { 
    const {promise, pending, success, fail} = action 
    if(promise) { 
    dispatch(pending()); 
    promise.then(
     res => dispatch(success(res)), 
     err => dispatch(fail(err)) 
    ) 
    } 
    return next(action) 
} 

Und es verwendet, wie dies

const requestPosts =() => ({ type: REQUEST_POSTS }) 
const recievePosts = posts => ({ type: RECIEVE_POSTS, posts }) 
const requestPostsFail = reason => ({ type: REQUEST_POSTS_FAIL, reason }) 

const fetchPosts =() => dispatch => dispatch({ 
    promise: callAPI('posts'), 
    pending: requestPosts, 
    success: receivePosts, 
    fail: requestPostsFail 
})