Как использовать Redux с вызовом API в реагировать? - PullRequest
Новая
       10

Как использовать Redux с вызовом API в реагировать?

0 голосов
/ 15 января 2020

Мне любопытно, как я могу сохранить данные, найденные в результате вызова API, в хранилище с избыточностью и затем получить к нему доступ. Это код, с которым я работаю. Я не знаком с редуксом и хотел бы лучше понять, как его использовать. 

const mapStateToProps = state => {
  return {
    test: state.simpleReducer.test
  };
};

const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
});

class App extends Component {
  weatherData = {};
  componentDidMount = () => {
    this.newAction();
  };

  newAction = async () => {
    let weatherResponse;

    await axios({
      method: "get",
      url: "http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric"
    }).then(function(response) {
      weatherResponse = [...response.data];
    });
    this.weatherData = weatherResponse;
    console.log(this.weatherData);
  };

1 Ответ

1 голос
/ 15 января 2020

Источник ваших данных на самом деле не имеет значения - данные попадают в ваш магазин, отправляя действия с этими данными в качестве полезной нагрузки, и редукторы, которые принимают эту полезную нагрузку и помещают ее в хранилище.

Поэтому, когда ваш запрос завершен, вам нужно отправить действие и убедиться, что оно обрабатывается в редукторе.

Используйте функцию connect из response-redux для подключения вашего mapDispatchToProps и mapStateToProps функционирует для вашего компонента, чтобы вы могли выполнить действие и использовать полученное обновленное состояние.

...