使用Redux Saga从API获取信息

Question

我正在学习Redux Saga并尝试在每次呈现组件时调用API，并在State对象中保存API的响应。我像这样实现了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));

我想每次qazxsw poi，称为qazxsw poi动作。这是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电话。我究竟做错了什么？

提前致谢！

Answer 1

这是你的代码中的错误。你需要在componentDidMount而不是action中调用API。

this.props.updateRate()

上面的行将ratesActions.updateRate()对象中的所有动作绑定到组件的道具。

更新：

在回复你的评论时，State将是const mapDispatchToProps = dispatch => bindActionCreators(ratesActions, dispatch); ，因为你还没有定义。 redux connect注入的数据将通过不通过状态的道具提供。所以你必须在你的组件中访问像这个rateActions这样的费率