gpt4 book ai didi

reactjs - Saga 观察者未接收或处理调度的操作

转载 作者:行者123 更新时间:2023-12-02 03:34:37 25 4
gpt4 key购买 nike

我有一个观察者传奇,它不断监听某种类型的操作。这是从 saga.run() 启动的。当它收到某种类型的操作时,它应该调用另一个执行异步操作的传奇。然而,第二个传奇中的断点永远不会被调用。

因此,要么原始代码未正确分派(dispatch)操作,要么观察者传奇配置错误。

观察者传奇代码

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() 方法,所以我认为问题出在我的 watchersSaga

第二次更新:

我越来越认为问题出在线条上

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

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

最佳答案

对于任何有类似问题的人,我最终通过将我的观察者 Saga 更改为以下内容来解决它

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

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

关于reactjs - Saga 观察者未接收或处理调度的操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50647711/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com