Saga Watcher не получает или не обрабатывает отправленные действия - PullRequest
Новая
       11

Saga Watcher не получает или не обрабатывает отправленные действия

0 голосов
/ 01 июня 2018

У меня есть сага о наблюдателе, которая постоянно слушает действия определенного типа.Это запускается из saga.run ().Когда он получает действие определенного типа, он должен затем вызвать другую сагу, которая выполняет асинхронные действия.Однако точка останова во второй саге никогда не вызывается.

Таким образом, либо исходный код неправильно отправляет действие, либо неправильно настроена сага-наблюдатель.

Код саги-наблюдателя 

import { all, fork, takeLatest } from 'redux-saga/effects'
import {fetchItems} from './itemsSaga';

function* watchLoadItemsRequest() {
  while(true) {
    yield takeLatest('FETCH_ITEMS_REQUEST', fetchItems);
  }
}    

export default function* root() {
  yield all ([
    fork(watchLoadItemsRequest)
  ])
}

Моя itemsSaga (не вызывается) 

import { call, put } from 'redux-saga/effects'
import fetchItemsCompleted from '../actions/fetchItemsCompleted';
import httpCallCompleted from '../actions/httpCallCompleted';
import httpCallStarted from '../actions/httpCallStarted';
import itemAPI from '../api/itemAPI';
import ItemsEntity from '../api/itemEntity';

// worker Saga: will be fired on FETCH_ITEMS_REQUEST actions
export function* fetchItems(action:any) {
  let items : ItemEntity[];

  yield put(httpCallStarted());
  trades = yield call(itemAPI.getAllItemsAsync)
  trades = [new ItemEntity(), new ItemEntity()]
  yield put(fetchItemsCompleted(items))
  yield put(httpCallCompleted());
}

Код создания моего магазина 

import { applyMiddleware, createStore } from 'redux';
import createSagaMiddleware from 'redux-saga';

import reducers  from '../reducers';
import watchersSaga from '../sagas/watchersSaga';

export default function getStore() {
const sagaMiddleware = createSagaMiddleware();

    const store = createStore(
      reducers, applyMiddleware(sagaMiddleware)
    );

    sagaMiddleware.run(watchersSaga);

    return store;
  }

И, наконец, элемент управления, который должен отправлять действие FETCH_ITEMS_REQUEST 

import * as React from 'react';
import { connect, Dispatch } from 'react-redux';
import ItemEntity from './api/itemEntity';
import './App.css';
import IStoreState from './interfaces/IStoreState';

interface IContentProps {
  groupingType : string,
  items: ItemEntity[],
  loadItems : () => void
}

class MyContent extends React.Component<IContentProps,{}> {

  constructor(props: any) {
    super(props);
  }

  public componentDidMount() {
    this.props.loadItems();
  }

  public render() {
    return (
      <div className="Center-content">
        <div className="Center-content White">
        <br/><br/>Grouped by {this.props.groupingType}<br/><br/>{this.props.items.length} items loaded
        </div>
      </div>
    );
  }


}

function mapStateToProps(state: IStoreState) {
  return {
    groupingType: state.navigation.groupingType,
    trades: state.item.items
  };
}    

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    loadItems: () => dispatch({type:'FETCH_ITEMS_REQUEST'})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PnlContent);

Почему это не работает?Есть ли способ, которым я могу сказать, действительно ли FETCH_ITEMS_REQUEST генерируется и отправляется в Redx или нет?Таким образом, по крайней мере, я мог бы сузить место возникновения проблемы.

ОБНОВЛЕНИЕ: я настроил один из моих редукторов для прослушивания FETCH_ITEMS_REQUEST, и он подхватывает событие, так что мой контроль отправляет действие нормально,Просто кажется, что WatcherSaga не вызывает метод ItemsSaga fetchItems (), когда он получает действие FETCH_ITEMS_REQUEST, поэтому я думаю, что проблема в моем watchersSaga

ВТОРОЕ ОБНОВЛЕНИЕ:

Все больше и больше я думаю, чтопроблема заключается в строках 

while(true) {
    yield takeLatest('FETCH_ITEMS_REQUEST', fetchItems);
  }

Это, похоже, не отвечает на полученное сообщение FETCH_ITEMS_REQUEST и вызывает fetchItems

1 Ответ

0 голосов
/ 04 июня 2018

Для тех, у кого похожая проблема, я решил ее, заменив мои наблюдатели Saga на следующие 

function* watchLoadTradesRequest() {
    yield takeEvery('FETCH_TRADES_REQUEST', fetchTrades);
}

// Register all your watchers
export default function* watchersRootSaga() {
  yield all ([
    watchLoadTradesRequest()
  ])
}
...