Question

我正在研究我的第一个React / Redux应用程序，现在我已经遇到了第一个非常重要的问题。

应用程序数据（相当多）使用默认参数在页面加载时从服务器异步加载。然后在客户端进一步过滤。用户可以更改初始数据加载的参数和过滤器。

我可能遇到的一个问题是，如果用户在返回参数之前切换参数，则从初始数据加载返回过时数据。另一种是以惯用的Redux方式管理事件链。

我确信我可以手动取消之前的回调，但我真的在寻找更加迫切的方法。

我通常会使用RX来解决这类问题。这会是明智的吗？在哪种情况下，我的RX代码应该放在哪里？

感谢您的建议

Answer 1

到目前为止，最可靠的解决方案是使用redux-saga库。它通过富有表现力，易于测试declarative way（不是rxjs解决方案）来处理副作用。

在您的情况下，必须使用takeLatest()效果，以确保只处理最新请求：

import { takeLatest } from 'redux-saga/effects'

function* watchFetchData() {
  yield takeLatest('FETCH_REQUESTED', fetchData)
}

export function* fetchData(action) {
   try {
      const data = yield call(Api.fetchUser, action.payload.url)
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

'FETCH_REQUESTED'是动作创建者发送的动作类型。 takeLatest()确保只处理最新的操作，并且只从最新的获取请求中获得结果。

如果您使用像axios这样的抓取库，则可以force the cancellation发出不必要的ajax请求。

有关saga helpers的更多详情。

Answer 2

我发现了一个名为Redux-Observable,的库，它允许您将Redux事件视为事件流，并因此执行复杂的异步操作。这完全符合法案。

This video让我开始

将异步结果与React和Redux结合使用

2 个答案: