Использование Redux Saga для получения информации из API - PullRequest
Новая
       15

Использование Redux Saga для получения информации из API

1 голос
/ 30 апреля 2019

Я изучаю Redux Saga и пытаюсь вызывать API каждый раз при визуализации компонента и сохраняю ответ API в объекте State. Я реализовал Component так: 

import React, { Component } from "react";
import { Container } from "./styles";
import { withRouter } from "react-router-dom";
import { bindActionCreators } from "redux";
import * as ratesActions from "../../stores/actions/rates";
import { connect } from "react-redux";

class Main extends Component {
  componentDidMount() {
    ratesActions.updateRate();
  }

  render() {
    return (
      <Container>
        <div>
          <h1>Hi there!</h1>
        </div>
      </Container>
    );
  }
}

const mapStateToProps = state => ({
  rates: state.rates
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(ratesActions, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Main));

Я хочу, чтобы каждый раз componentDidMount вызывал действие updateRate(). Это действие updateRate(): 

export function updateRate() {
  return {
    type: "ASYNC_RATE_UPDATED"
  };
}

Это действие выполняется, потому что, если я добавлю туда console.log, я вижу, что оно работает.

Затем я создал свой sagas: 

import api from "../../services/api";
import { call, put, takeLatest, all } from "redux-saga/effects";

export function* updateRateAsync() {
  try {
    const response = yield call(api.get("public/rates/all"));

    yield put({
      type: "RATE_UPDATE_SUCCEEDED",
      response: response.data
    });
  } catch (error) {
    yield put({
      type: "RATE_UPDATE_FAILED",
      message: error.message
    });
  }
}

export function* watchUpdateRates() {
  yield takeLatest("ASYNC_RATE_UPDATED", updateRateAsync);
}

export default function* root() {
  yield all([watchUpdateRates()]);
}

И мой редуктор: 

export default function rates(state = [], action) {
  switch (action.type) {
    case "RATE_UPDATE_SUCCEEDED":
      console.log(action.response[0]["exchange_rate"]);
      return {
        ...state,
        rates: {
          ves: action.response[0]["exchange_rate"],
          brl: null,
          ars: null,
          inr: null,
          zar: null
        }
      };
    default:
      return state;
  }
}

Однако мой saga не будет прослушивать мой action и не будет выполнять вызов API. Что я делаю не так?

Заранее спасибо!

1 Ответ

1 голос
/ 30 апреля 2019

Вот что не так в вашем коде. Вам нужно вызвать this.props.updateRate() в componentDidMount вместо ratesActions.updateRate(). 

const mapDispatchToProps = dispatch => bindActionCreators(ratesActions, dispatch);

Над строкой будет привязано все действие в rateActions объекте к реквизиту компонента.

Обновление:

В ответ на ваш комментарий State будет null, так как вы его не определили. данные, введенные при подключении через Redux, будут доступны, но не по состоянию. поэтому вам нужно получить доступ к таким ставкам this.props.rates в вашем компоненте

...