Redux Store aktualisiert, aber ist nicht in MapStateToProps

Question

Ich habe versucht, Daten von einer Devisen-API zu ziehen, aber ich bin ein wenig ratlos, wie Änderungen nicht durch mapStateToProps widergespiegelt werden.

Im Wesentlichen versuche ich einen Aufruf an die API durch eine Aktion Creator. Hier ist der Aktionsersteller.

Diese Aktion wird von der Funktion calculateDays in einer anderen Datei aufgerufen. Die Funktion enumerateDays gibt ein Datenfeld zwischen dem gewünschten Datum und dem aktuellen Datum zurück. Zum Beispiel ["2017-08-10", "2017-08-11", "2017-08-12", "2017-08-13", "2017-08-14", "2017-08-15 "," 2017-08-16 "," 2017-08-17 "," 2017-08-18 "," 2017-08-19 "]

In calculateDays wird der Aktionsersteller aufgerufen, der in Turn ist ein Async-Aufruf an die API, die ich verwende.

componentWillMount() { 
    this.calculateDays(); 
} 

calculateDays() { 
    var currentDate = moment(); 
    var hold = enumerateDays('2017-8-10', currentDate); 

    var days = []; 
    var firstDay = hold[0]; 
    var currencies; 

    days = hold.map((date) => { 

     var inBetween = calculateBetween(firstDay, date); 
     this.props.fetchTimeData(this.props.base, date); 

     console.log("this is tempData", this.props.saveTime) 

     return(
      { 
       currencies: 'test', 
       date: date, 
       days: inBetween 
      } 
     ) 
    }) 

} 

render(){ 

    const margins = { top: 50, right: 20, bottom: 100, left: 60 }; 
    const svgDimensions = { width: 1400, height: 800 }; 

    var data = [ 
     { 
      "age": 39, 
      "index": 0 
     }, 
     { 
      "age": 38, 
      "index": 1 
     }, 
     { 
      "age": 34, 
      "index": 2 
     }, 
     { 
      "age": 12, 
      "index": 3 
     } 
    ]; 

    //for color, pass the array of colors to the redux store then pop off from the beginning into chartSeries 

    var chartSeries = [ 
     { 
     field: 'age', 
     name: 'USD', 
     color: '#ff7f0e', 
     style: { 
      "stroke-width": 2, 
      "stroke-opacity": .2, 
      "fill-opacity": .2 
     } 
     } 
    ] 

    //iterate over a list of years and calculate days from using moment 
    //the data will have years, but the function down here will change it 
    //set the very first index date as the "from" date in moment.js 
    var x = function(d) { 
     return d.index; 
    } 

    return(
     <div> 
      <LineChart 
       margins= {margins} 
       width={svgDimensions.width} 
       height={svgDimensions.height} 
       data= {data} 
       chartSeries= {chartSeries} 
       x= {x} 
      /> 
      {console.log(this.props.saveTime)} 
     </div> 
    ); 
} 

function mapStateToProps(state) { 
    return { 
     saveTime: state.data.currencyTime 
    }; 
} 

export default connect(mapStateToProps, actions)(DateChart); 

Schließlich ist dies mein Reducer.

const INITIAL_STATE = { 
    currency: fakeData, 
    currencyTime: [] 
} 

export default function(state = INITIAL_STATE, action) { 
    switch (action.type){ 
     case FETCH_DATA: 
      return {...state, currency: action.payload}; 
     case FETCH_TIME_DATA: 
      return {...state, currencyTime: action.payload}; 
     default: 
      return state; 
    } 
} 

Ich habe versucht, das Debuggen mit redux Logger und ich sehe, dass die Aktion richtig http://imgur.com/a/HGHbB gefeuert wird. Allerdings bekomme ich immer noch ein leeres Array zurück.

In meiner anderen ähnlichen Aktion Schöpfer, bekomme ich die Daten von den api und mapeStateTo Requisiten ohne Probleme.

Ich habe das Gefühl, ich vermisse einen wichtigen Teil des Verständnisses, wie die Redux-Store-Updates im Lebenszyklus von Komponenten, aber ich bin mir nicht sicher, was genau. Das Repo ist hier, wenn Sie genauer hinsehen möchten https://github.com/kudou-reira/forexD3

Answer 1

Haben Sie Ihren Reducer in Ihrem Mähdrescher hinzugefügt?