Question

我有一个观察者传奇，一直在倾听某种类型的行为。这是从saga.run（）启动的。当它收到某种类型的动作时，它应该调用另一个执行异步动作的传奇。然而，第二个传奇故事中的断点永远不会被调用。

因此，原始代码无法正确调度操作，或者观察者传奇配置错误。

Watcher传奇代码

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是否实际生成并发送到redux？这样至少我可以缩小问题发生的地方。

更新：我已经调整了我的一个Reducer来监听FETCH_ITEMS_REQUEST并且它接收了事件，所以我的控制是调度动作。似乎WatcherSaga在收到FETCH_ITEMS_REQUEST动作时没有触发ItemsSaga fetchItems（）方法，所以我认为问题出现在我的观察者萨加

第二次更新：

越来越多我认为问题在于行

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

这似乎没有响应收到的FETCH_ITEMS_REQUEST消息并调用fetchItems

Answer 1

对于有类似问题的人，我最终通过将观察者Saga改为以下来解决问题

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

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

Saga观察者没有接收或处理派遣的行动

1 个答案: