时间戳

首页 > 解决方案 > 使用 Redux Saga 从 API 获取信息

reactjs - 使用 Redux Saga 从 API 获取信息

问题描述

我正在学习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"
  };
}

这个动作被执行了，因为如果我把 aconsole.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;
  }
}

但是， mysaga不会听 my action，也不会执行API呼叫。我究竟做错了什么？

提前致谢！

标签： reactjsreduxredux-saga

解决方案

这是您的代码中的问题。您需要调用this.props.updateRate()componentDidMount 而不是ratesActions.updateRate().

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

上面的行会将rateActions对象中的所有操作绑定到组件的道具。

更新：

在回应您的评论时，null由于您尚未定义状态，因此状态将是。redux connect 注入的数据将通过 props 而不是 state 可用。this.props.rates所以你必须在你的组件中访问这样的费率

推荐阅读