Часть реализации redux-saga генерирует бесконечный цикл - PullRequest
Новая
       1

Часть реализации redux-saga генерирует бесконечный цикл

0 голосов
/ 27 января 2020

хорошо, у меня есть эта ошибка l oop, когда я получаю свои события от моего бэкэнда, для моего внешнего интерфейса я использую Typescript с реакцией. Скриншот показывает, что я получаю l oop. enter image description here

Это проблема, потому что сломал chrome. Вот мой код, который так работает:

мои действия или имя файла eventsAction.tsx 

export const FETCH_EVENTS_LOAD = 'FETCH_EVENTS_LOAD';
export const FETCH_EVENTS_SUCCESS = 'FETCH_EVENTS_SUCCESS';
export const FETCH_EVENTS_FAILURE = 'FETCH_EVENTS_FAILURE';

мой редуктор или eventsReducer.tsx 

import {
  FETCH_EVENTS_LOAD,
  FETCH_EVENTS_SUCCESS,
  FETCH_EVENTS_FAILURE,
} from '../Actions/eventsAction';

const initialState = {
  data: [],
  loading: false,
  error: '',
};

export default function reduxSagaReducer(state = initialState, action: any) {
  switch (action.type) {
    case FETCH_EVENTS_LOAD: {
      return {
        ...state,
        loading: true,
        error: '',
      };
    }
    case FETCH_EVENTS_SUCCESS: {
      return {
        ...state,
        data: action.data,
        loading: false,
      };
    }
    case FETCH_EVENTS_FAILURE: {
      return {
        ...state,
        loading: false,
        error: action.error,
      };
    }
    default: {
      return state;
    }
  }
}

Мои событияSaga .tsx 

import { put, takeEvery, takeLatest } from 'redux-saga/effects';
import {
  FETCH_EVENTS_LOAD,
  FETCH_EVENTS_SUCCESS,
  FETCH_EVENTS_FAILURE,
} from '../Actions/eventsAction';
import { getEvents } from '../../services/events/api';

function* fetchEvent() {
  try {
    const events = yield getEvents();
    yield put({ type: FETCH_EVENTS_SUCCESS, data: events });
  } catch (e) {
    yield put({ type: FETCH_EVENTS_FAILURE, error: e.message });
  }
}

export function* eventsSaga() {
  // Allows concurrent fetches of events
  yield takeEvery(FETCH_EVENTS_LOAD, fetchEvent);
  //yield [fetchEvent()];
  // Does not allow concurrent fetches of events
  //yield takeLatest(FETCH_EVENTS_LOAD, fetchEvent);
}

export default eventsSaga;

когда я реализую это, я использую useDispatch () 

import React, { useState } from 'react';
import { connect, useDispatch } from 'react-redux';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import EventCard from '../../components/EventCard';
import IEvent from './../../services/events/models/IEvent';
import BaseModal from './../../components/BaseModal/BaseModal';

const EventList = (props: any) => {
  const dispatch = useDispatch();
  dispatch({
    type: 'FETCH_EVENTS_LOAD',
  });

  const [currentEvent, setCurrentEvent] = useState<IEvent | null>(null);
  const [modal, setModal] = React.useState(false);

  const openModal = (event: IEvent) => {
    setCurrentEvent(event);
    setModal(true);
  };

  const closeModal = () => {
    setCurrentEvent(null);
    setModal(false);
  };

  return (
    <>
      {console.info(currentEvent)}
      <BaseModal state={modal} onClose={closeModal}></BaseModal>
      <Container maxWidth="lg">
        <Grid container spacing={4}>
          {props.data.map((event: IEvent) => (
            <Grid item xs={4} key={event.id}>
              <EventCard event={event} onActionClick={() => openModal(event)} />
            </Grid>
          ))}
        </Grid>
      </Container>
    </>
  );
};

const mapStateToProps = (state: any) => ({
  data: state.reduxSaga.data,
  loading: state.reduxSaga.loading,
  error: state.reduxSaga.error,
});

export default connect(mapStateToProps)(EventList);
...