Redux: Aktualisiere Zustand mit einer Liste

Question

Ich hole eine Liste von Objekten aus einer Datenbank und neugierig, wie ich sie überlagern sollte, um state mit Redux zu aktualisieren.

Ich habe meist die Egghead-Tutorial, aber das ging mit der Aktualisierung des Zustands mit einem Objekt zu einer Zeit.

Angenommen, ich beginne mit einer leeren Liste [] und ich mache einen fetch() Aufruf an einen Server, der eine Liste von Objekten [Object1, Object2, Object3] zurückgibt.

Ich kämpfe um den Datenfluss zu verstehen und theoretisch wie soll ich das tun.

erkannte ich den Code unten nicht funktioniert, aber ich versuche, zu empfehlen, wie ich diese Arbeit in der Hoffnung zu machen, ich versuche mir jemand es beenden helfen kann ..

Wie ich das Reduktions schreiben Sie das wird über die Ergebnisse von fetchServerData() abbilden und todo aufrufen und alles zum Zustandsobjekt hinzufügen?

const candidate = (state, action) => { 
    switch (action.type) { 
     case 'ADD_CANDIDATE': 
      return { 
       id: action.id, 
       first: action.first, 
       last: action.last, 
       title: action.title, 
       company: action.company, 
       sent_inmail_date: action.sent_inmail_date, 
       response: action.response 
      } 

     default: 
      return state 
    } 
} 

const mapOverObject = (listObject, action) => { 
    ?? 
} 

const store = createStore(mapOverObject) 

const fetchServerData =() => { 
    const URL = 'http://localhost:5000/get_db' 
    return fetch(URL) 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      return responseJson 
     }); 
} 

const TodoApp = (props) => { 
    return (
     <div> 
      <button onClick = {() => fetchServerData() }> Get Server Data </button> 

     </div> 
    ) 
} 

ReactDOM.render(
    <Provider store={store} > 
     <TodoApp /> 
    </Provider>, 
    document.getElementById('root') 
) 

Answer 1

Sie brauchen die Karte nicht über das Array. Wenn Sie die responseJson erhalten, senden Sie eine Aktion mit den Daten (Sie können direkt das gesamte Array senden). Dann kann Ihr Reducer direkt den Laden damit aktualisieren.

Sie müssten über das Array mappen, wenn Sie zum Beispiel einige Felder innerhalb der Objekte loswerden möchten. Aber wieder kannst du das in deinem Reducer machen.