React-Redux fetch API

0

Witam, tworzę aplikację walutową na której uczę się użycia Redux z reactem. Metoda fetch pobiera mi dane, widzę je w konsoli, jednak gdy próbuję po nie sięgnąć wyskakuje mi błąd. Rozumiem, że jest to spowodowane tym, że zanim dane się załadują ja próbuję użyć danych ze store. Pytanie moje brzmi: Jak poprawnie uzyskać dostęp do danych?

1

Nie podałeś żadnych informacji w postaci kodu, którego używasz.

Żeby użyć danych z fetch'a potrzebujesz metody then:

fetch(url).then(response => response.json()).then(json => {
 useData(json);
});

całość polega na napisaniu funkcji useData, która używa tych danych.

0

moja akcja wygląda tak :

export function fetchCurrency() {
  return function(dispatch) {
    fetch("https://api.exchangeratesapi.io/latest")
      .then(res => {
        return res.json();
      })
      .then(res => {
        dispatch({ type: "FETCH_CURRENCY", payload: res });
      })
      .catch(err => {
        console.log(err);
      });
  };

Pobiera mi dane, widzę je w konsoli ale nie mogę z nimi pracować

1

W skrócie potrzebujesz:

  1. reducera, który dostając FETCH_CURRENCY zaktualizuje stan Redux o payload.
  2. funkcji mapStateToProps, która zamieni stan reduxa na propsy komponentu.
  3. połączyć komponent z funkcją mapStateToProps (connect)
0

Mój reducer:

const initialState = {
  currency: []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case "FETCH_CURRENCY":
      return {
        ...state,
        currency: action.payload
      };
    default:
      return state;
  }
}

Mam też Mapstatetoprops i mapDispatchtoProps :

const mapStateToProps = state => {
  console.log(state.currency.rates);
  return { data: state };
};

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      fetchCurrency
    },
    dispatch
  );

export default connect(mapStateToProps, mapDispatchToProps)(App);
1

No to wystarczy użyć tych danych w komponencie App jako this.props.data. Może problem leży gdzieś indziej? Wyświetla się jakiś błąd?

0

Pobieram dane przez componentDidMount. Sprawdzam konsolę i widzę dane w konsoli:

{rates: {…}, base: "EUR", date: "2019-12-17"}

gdy jednak próbuję je pokazać ze store {this.props.data.currency.CAD} wyskakuje TypeError: Cannot read property 'props' of undefined. Nie mam pojęcia jak do tego podejść

1

Pokaż kod i jego kontekst, który wyświetla błąd.

0
import React from "react";
import { connect } from "react-redux";
const CurrencyConverter = () => {
  return (
    <>
      <h1>Currency Coverter APP</h1>
      <h3>Convert Euro to => {this.props.data.currency.CAD}</h3>
     
    </>
  );
};

const mapStateToProps = state => {
  return { data: state };
};

export default connect(mapStateToProps)(CurrencyConverter);

w konsoli pokazuje, że błąd jest tutaj => ```

Convert Euro to => {this.props.data.currency.CAD}

</p>
1
const CurrencyConverter = props => {
  return (
    <>
      <h1>Currency Coverter APP</h1>
      <h3>Convert Euro to => {props.data ? props.data.currency.CAD : "Loading..."}</h3>

    </>
  );
};
0

Poprawna ścieżka powinna wyglądać tak:

 <h3>
        Convert Euro to =>{" "}
        {props.data ? props.data.currency.rates.CAD : "Loading..."}
      </h3>

jednak dalej wyskakuje mi ten sam błąd

1

Taki pro tip, że możesz zrobić console.loga w const CurrencyConverter...

0

Ciekawa sprawa, gdy spojrzę na konsolę wyglada ona tak:

rates: {CAD: 1.469, HKD: 8.6953, ISK: 136.6, PHP: 56.413, DKK: 7.4731, …}
base: "EUR"
date: "2019-12-17"
__proto__: Object

gdy próbuję dostać currency.rates.CAD wyskakuje błąd, ale gdy dam currency.rates.base to zwraca mi EUR. Tak jakbym nie mógł się dostać do obiektu rates

1

A jak zrobisz
console.log(currency.rates);
console.log(typeof currency.rates);

0
pierwszy console.log:  {CAD: 1.469, HKD: 8.6953, ISK: 136.6, PHP: 56.413, DKK: 7.4731, …}
drugi console.log: CurrencyConverter.js:7 object
0

Zmieniłem API na inne i działa bez problemu... dzięki wielkie za pomoc jackweb!

1 użytkowników online, w tym zalogowanych: 0, gości: 1