Redux-Status mit paginierten relationalen Daten

Question

Wie würden Sie die Redux-Statusform und/oder Reduktionszusammensetzung für paginierte und relationale Daten wie paginierte Posts aus einer bestimmten Kategorie aus einer Wordpress-API (zB: .../posts? Kategorien = 11)?

zu tun habe ich es zur Zeit auf diese Weise:

const reducer = (state = {}, action) => { 
    switch (action.type) { 
    case 'RECEIVE_POSTS': { 
     const { data } = action.payload.result // posts ids 
     return { ...state, [action.meta.page || '1']: data } 
    } 
    default: return state 
    } 
} 

const list = (listName, predicate, getSublistName) => (state, action) => { 
    if (action.error || listName != predicate(action)) { 
    return state 
    } else if (getSublistName) { 
    const sublistName = getSublistName(action) 
    return { ...state, [sublistName]: reducer(state[sublistName], action) } 
    } 
    return reducer(state, action) 
} 

export default combineReducers({ 
    categories: list(
    'categories', 
    (action) => action.meta && action.meta.list, 
    (action) => action.meta && head(action.meta.categories)) // head comes from Lodash 
), 
    search: list(
    'search', 
    (action) => action.meta && action.meta.list 
), 
    ... 
} 

Es funktioniert, aber ich fühle, dass entweder das list höhere Ordnung Minderer, indem sie agnostisch in Bezug auf eine tiefere Verschachtelung (was falsch anfühlt verbessert werden könnte. ..) oder die resultierende Zustandsform ist zu sehr verschachtelt.

Ich kann nicht meinen Kopf wickeln, um einen völlig flachen Zustand zu bekommen, außer durch Einträge wie ein postsCategories Array von Posts Objekten mit einer Post/Kategorie ID und Seitenzahl, aber dann würden Daten viel dupliziert werden (was sich anfühlt auch falsch ...).

Es gibt some libraries for pagination, aber ich glaube nicht, dass einer von ihnen damit umgehen.

Geht es um Reduktionsmittelzusammensetzung oder Zustandsform? Beide?

Answer 1

Ich poste meine eigene Antwort, da ich glaube, dass es perfekt für diesen speziellen Fall von paginiertem und relationalem Zustand funktioniert, der von einer WP API kommt.

Ich flachte meine Statusform ab, indem ich Abfragezeichenfolgen verwendete (die in Anfragen an die WP-API verwendet wurden), um die einzelnen Listenlisten im Status zu benennen. So sieht es jetzt so aus:

entities: { 
    posts: { 
     byId: { ... }, 
     byList: { 
      'page=1': [...], // post ids 
      'categories=1&page=1': [...], // post ids 
      'search=foo': [...] // post ids 
     }, 
    }, 
} 

Pfostenlisten sind durch alle Ansichtbestandteile leicht teilenbar. Ich kann eine Liste auswählen, indem params oder search von React Router match oder location mit jeweils und URLs System erhalten arbeitet entweder mit Kategorien/foo/Seite/1 oder Kategorien = foo & page = 1, wie in WP Kern.

Answer 2

Der Standardansatz für die Verwaltung relationaler Daten in einem Redux-Speicher ist "Normalisierung". Sehen Sie den Structuring Reducers - Normalizing State Shape Abschnitt in den Dokumenten und einige der Artikel in der Redux Techniques - Selectors and Normalization Abschnitt meiner React/Redux-Links-Liste.

Für die Seitenumbruch hat der Artikel einige nützliche Beispiele zum Verfolgen mehrerer Teilmengen von normalisierten Daten im Speicher.

Es ist auch erwähnenswert, dass es bereits mindestens eine Bibliothek gibt, die der Bereitstellung einer React/Redux-Schnittstelle für eine Wordpress-API namens kasia gewidmet ist.