Question

我正在研究React，Redux和Redux-sagas，应用程序陷入无限循环，请帮忙解决此问题。

Item.js

import React from "react";
import ReactDOM from "react-dom";
import { Link } from "react-router-dom";
import { gateway as MoltinGateway } from "@moltin/sdk";
import getList from "./../Action/Action";
import { connect } from "react-redux";
//import data from "./data";

export class Item extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.pickItem = this.pickItem.bind(this);
  }
  pickItem(pickedItem, id) {
    //this.props.getList();
    //pickedItem.push(id);
    //this.setState({ pickItem: pickedItem });
  }
  componentWillMount() {
    this.props.getList();
  }
  render() {
    const { pickedItem } = this.state;
    //const  data = this.props.getList()
    console.log(this.props);
    return (
      <div className="ItemPage">
        <header>
          <h1>Online shopping</h1>
          <h2>Visit | Pick | Pay</h2>
        </header>
        <div
          onClick={this.pickItem.bind(this, pickedItem, 2)}
          className="item-list"
        >
          <div className="logoWarapper">
            <img
              src="https://rukminim1.flixcart.com/image/660/792/jmdrr0w0/shirt/q/q/r/xxl-tblwtshirtful-sh4-tripr-original-imaf9ajwb3mfbhmh.jpeg?q=50"
              width="100"
              height="100"
              alt=""
            />
          </div>
          <div className="itemWarapper">
            <h3>Item Name</h3>
            <p>
              <span>&#8377;</span>
              <span>3000</span>
            </p>
          </div>
        </div>
        <div onClick={this.pickItem} className="item-list">
          <div className="logoWarapper">
            <img
              src="https://rukminim1.flixcart.com/image/660/792/jmdrr0w0/shirt/q/q/r/xxl-tblwtshirtful-sh4-tripr-original-imaf9ajwb3mfbhmh.jpeg?q=50"
              width="100"
              height="100"
              alt=""
            />
          </div>
          <div className="itemWarapper">
            <h3>Item Name</h3>
            <p>
              <span>&#8377;</span>
              <span>3000</span>
            </p>
          </div>
        </div>
        <Link to="/payment">
          <button className="button">Make Payment</button>
        </Link>
      </div>
    );
  }
}

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

const mapDispatchToProps = {
  getList
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Item);

Action JS

export const ADD_TODO = "GET_LIST";

export const getList = () => ({
  type: "GET_LIST"
});
export default getList;

Reducer JS

const Reducer = (state = [], action) => {
  switch (action.type) {
    case "GET_LIST":
      return [
        ...state,
        {
          list: action
        }
      ];
    default:
      return state;
  }
};

export default Reducer;

Sagas JS

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

function* fetchNews() {
  const json = yield fetch(
    "https://api.themoviedb.org/3/movie/550?api_key=258ca659445121cb5d52f31961635ba7"
  ).then(response => response.json());

  yield put({ type: "GET_LIST", json: json.articles });
}
function* actionWatcher() {
  yield takeLatest("GET_LIST", fetchNews);
}
export default function* rootSaga() {
  yield all([actionWatcher()]);
}

在Sagas中使用的此API将获取电影列表。因此，当渲染Item.js组件时，我将获得电影列表。当前，在应用程序上似乎是无限循环

Answer 1

您要从saga进行相同的操作，您正在“观察”该操作。

通常，您应该对组件进行分派一些类型为GET_LIST_REQUEST的操作，然后将GET_LIST_SUCCESS中为类型saga的操作放入减速器中。

因此，您的 Action JS 应该如下所示：

export const ADD_TODO_REQUEST = "GET_LIST_REQUEST";
export const ADD_TODO_SUCCESS = "GET_LIST_SUCCESS";

export const getList = () => ({
  type: "GET_LIST_REQUEST"
});
export default getList;

您的减速器

const Reducer = (state = [], action) => {
  switch (action.type) {
    case "GET_LIST_SUCCESS":
      return {
        ...state,
        list: action.json
        };
    default:
      return state;
  }
};

export default Reducer;

您的传奇

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

function* fetchNews() {
  const json = yield fetch(
    "https://api.themoviedb.org/3/movie/550?api_key=258ca659445121cb5d52f31961635ba7"
  ).then(response => response.json());

  yield put({ type: "GET_LIST_SUCCESS", json: json.articles });
}
function* actionWatcher() {
  yield takeLatest("GET_LIST_REQUEST", fetchNews);
}
export default function* rootSaga() {
  yield all([actionWatcher()]);
}

在Redux Sagas上反应JS无限循环

1 个答案: