- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个观察者传奇,它不断监听某种类型的操作。这是从 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/
有什么方法可以将来自 node_modules 的 sagas 与我为我的应用程序编写的其他 sagas 结合起来吗?如果 sagaMiddleware.run() 接受 sagas 数组,但 id
我熟悉redux-thunk,今天来redux-saga,我知道当我们要处理异步的时候,redux-saga需要先调用一个actions作为signal,然后sagas来处理,返回成功/失败操作,所以
如果我有两个 sagas 在同一 Action 上等待 yield take(),是否可以保证哪个 saga 将首先选择该 Action 并执行其剩余逻辑或者是随机的?我需要确保第一个传奇在第二个传奇
我一直在关注 AxonBank example为了理解 Axon 框架中 Saga 的实现,并有一些像这样的代码来开始和结束 saga @Saga public class MoneyTransfer
我有一个基本的传奇,如下所示: const mySaga = function* () { yield takeEvery("SOME_ACTION_REQUEST", function* (
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我正在开发一个使用 redux-saga 的项目管理来自 API 调用的状态更改。 我看过很多关于如何对传奇进行单元测试的例子,但很少有例子可以用来实际进行集成测试。我们正在使用 jest对于断言。
我有下一个代码: const sagaMiddleware = createSagaMiddleware(options); . . . const createdStore = createStor
当调度一个 Action 时,它到达 reducer 和传奇的顺序是否得到保证? 我可以信赖它 首先进入reducer 那么传奇呢? reducer : function reducer(state
我们的应用程序使用尝试 - 成功 - 失败的方法来处理来自服务器的响应。 我有一个生成器函数,需要像这样运行: function * getSingleSectorAttempt(action) {
当它在屏幕上可见时,我正在记录横幅展示次数。 当用户滚动时,同一条横幅可以在短时间内多次显示。 我想防止这种情况发生。 乍一看,throttle是防止它的完美方法。 但是,当您在一页中有多个横幅时,t
我在 containers/App/sagas.js 中有一个 sagas.js,它包含一个登录 saga,我试图从一个登录弹出窗口调用它,它也有自己的 sagas.js (components/Lo
我有一个 Saga,我需要在其中执行 3 个异步请求,然后在后续请求中使用这 3 个请求的响应。这里有一些伪代码来解释: function* useOtherActionsAndSagas(actio
所以,我是 react 样板的新手,似乎没有办法在不影响前一个传奇的功能的情况下包含另一个传奇(即它不起作用)。 我尝试将 sagas 声明为常量,然后将其传递到容器末尾的 compose 函数中,但
我有以下情况: export function* addCircle(circleApi, { payload }) { try { const response = yiel
以前也有人问过类似的问题,但答案对我没有任何帮助。 What are selectors in redux? How to get something from the state / store i
我有一个运行良好的传奇,我调用一个操作并包含一些数据,传奇被触发,它从操作中提取值,执行API调用并以几个yield put结束 - 太棒了。 我现在正在尝试测试该传奇并解决问题,我已经编写了一个简单
我使用 redux-saga 的主要原因之一是它进行异步函数调用的可测试性。我的困境是,当我使用不属于我的 redux 存储的有状态对象进行编程时,使用 sagas 进行编程变得非常尴尬。是否有使用非
我是传奇世界的新手。虽然我在 react-native 领域使用过 thunk,但此刻我很困惑。我正在努力让我的项目的骨架继续运行,我希望它很快就会变得非常大。考虑到这一点,我试图将逻辑分成多个文件。
我正在使用 saga eventChannel 来监听正在触发的事件(可能是实际应用程序中的 WebSocket),然后我正在更新我的 Redux Store。在组件中,我正在调用 API 操作。然后
我是一名优秀的程序员,十分优秀!