Warum funktioniert meine Kartenfunktion nicht nach aktualisiertem Redux-Status mit react

Question

Ich zeige eine Liste von Artikeln aus meinem Statusspeicher an. Ich möchte diese Liste mit einem onClick Button aktualisieren. Meine Liste wird mit einer Kartenfunktion angezeigt, zuerst funktioniert es aber gut, aber ich klicke auf die Schaltfläche Ich habe den folgenden Fehler data.map is not a function. Wenn ich meine Komponente ohne Anzeige des Datenlistenelements ausführe, funktioniert alles einwandfrei, Statusaktualisierung korrekt.

Hier ist mein Minderer mit meiner Liste der Artikel:

var all = [ 
    {x: 'a', y: 20}, 
    {x: 'b', y: 14}, 
    {x: 'c', y: 12}, 
    {x: 'd', y: 19}, 
    {x: 'e', y: 18}, 
    {x: 'f', y: 15}, 
    {x: 'g', y: 10}, 
    {x: 'h', y: 14} 
]; 

var filtered = [ 
    {x: 'a', y: 9}, 
    {x: 'b', y: 5}, 
    {x: 'c', y: 6}, 
    {x: 'd', y: 12}, 
    {x: 'e', y: 10}, 
]; 


const ChartData = (state = all, action) => { 
    switch (action.type) { 
    case 'DATA_CHART_ALL': 
     return { all: update(state.all, {$set: all})} 
    case 'DATA_CHART_FILTER': 
     return { all: update(state.filtered, {$set: filtered})} 
    default: 
     return state; 
    } 
}; 

und hier ist meine Komponente:

function DisplayData ({ data, DataSetUpdate }) { 
     return (
     <div> 
     <ul> 
      { data.map((m, i) => 
      <li key={i}>{m.x} - {m.y}</li> 
     )} 
     </ul> 
     <button onClick={DataSetUpdate}>dataSetupdate</button> 
     </div> 
    ); 
    } 

    const mapStateToProps = (state) => { 
     return { 
      data: state.ChartData 
     }; 
    }; 


    const mapDispachToProps = (dispatch) => { 
     return { 
      DataSetUpdate:() => {dispatch (datachartFilter())}, 
     }; 
    }; 

Ich denke, es etwas falsch in meiner Komponente ist. Ich denke, ich muss etwas wie dieses verwenden. Pros irgendwo, aber ich weiß nicht wo. Ich habe auch versucht, eine ES6-Komponente class DisplayData extends React.Component mit einer Konstruktormethode zu bauen, aber damit kann ich meine DataSetUpdate-Funktion nicht übergeben.

hier ist die JS ist https://jsbin.com/xocopal/edit?js,console,output

Dank!

Edit # 1: Mein JS-Bin funktioniert nicht, weil ich nicht die unveränderlichen Bibliotheken funktioniert: https://cdnjs.com/libraries/immutable, so dass die Update-Methode in meinem Reducer nicht definiert ist.

Answer 1

Reduzierungen sollten nur Änderungen den Zustand auf dem Eingang basiert (immer ein neuer Zustand) , wenn Sie jemals Anschluß an eine API, würden Sie die Anrufe im Aktion ausführen und dann die Daten zu Ihrem Minderer für das Update senden

ich glaube, Sie müssen nur Ihre Minderer aktualisieren Dies ermöglicht eine einfachere und sauberere Lösung

 const ChartData = (state = all, action) => { 
     switch (action.type) { 
      case 'DATA_CHART_ALL': 
      return action.data 
      case 'DATA_CHART_FILTER': 
       return action.data 
      default: 
      return state; 
     } 
     }; 

und Ihre Aktion zu

   function datachartAll() { 
       return { 
        type: 'DATA_CHART_ALL', 
        data: all 
       }; 
       } 

       function datachartFilter() { 
       return { 
        type: 'DATA_CHART_FILTER', 
        data: filtered 
       }; 
       } 

siehe https://jsbin.com/vobuduluni/1/edit?js,console,output