0

i am working on React,Redux and Redux-sagas, am getting infinite loop on the appliaition, please help out to fix this issue.

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()]);
}

This API which used in the Sagas will get the list of movies. so i was to get the list of movies when Item.js components rendered. currently, it's seems infinite loop on the application

1 Answer 1

7

You're putting same action from saga, which you are "watching" for.

Usually, you should have some action with typeGET_LIST_REQUEST for dispatching from your component, and then, put action with type GET_LIST_SUCCESS from saga to get it in reducer.

So, your Action JS should looks like:

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;

Your Reducer

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

export default Reducer;

Your Saga

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()]);
}
6
  • What exactly is undefined? I just give a try to make request to url in saga, seems like there is no articles field in response. Jul 23, 2019 at 14:02
  • if we pass json also, state receives as undefined in the Item.js Jul 23, 2019 at 14:30
  • What your redux state looks like? Put console.log(state) before ` return [ ... ]` in reducer. Because it looks like you're putting new object to array, while trying get key list from state array Jul 23, 2019 at 16:19
  • Also, check please reducer in my answer again, I update it a bit Jul 23, 2019 at 16:22
  • @SivaprakashD: This answer explains why you get an infinite loop and how to fix it. The issue with undefined could be (and I suspect is) a completely different bug. Please ask about one thing at a time, upvote/accept helpful answers, and post a new question if you need help with a different bug.
    – Håken Lid
    Jul 23, 2019 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.