Question

我试图在里面用redux-saga实现React-boilerplate。所以我试图从服务器获取一些数据，然后重定向到另一个页面。问题是在重定向saga之前向服务器发出第二个请求。我想取消它有一些问题。这是我的代码的一部分：

export function* fetchData() {
  ...
  console.log('fetched');
  yield browserHistory.push('/another-page');
}

export function* fetchDataWatcher() {
  while (yield take('FETCH_DATA')) {
    yield call(fetchData);
  }
}

export function* fetchDataRootSaga() {
  const fetchWatcher = yield fork(fetchDataWatcher);

  yield take(LOCATION_CHANGE);
  yield cancel(fetchWatcher);
}

export default [
  fetchDataRootSaga
]

所以在这个例子中我有两个控制台日志，第二个出现在重定向之前。我该如何解决？

另一个问题。实际上，我在这个文件中有更多的功能。我应该创建＆＃34; rootSaga＆＃34;对于他们每个人，或者我可以在fetchDataRootSaga（）中取消所有这些？我的意思是，如果我以这种方式取消传奇是正常的：

export function* fetchDataRootSaga() {
  const watcherOne = yield fork(fetchDataOne);
  const watcherTwo = yield fork(fetchDataTwo);
  ...

  yield take(LOCATION_CHANGE);
  yield cancel(watcherOne);
  yield cancel(watcherTwo);
  ...
}

提前致谢！附：我不确定这段代码是否是最佳做法。它的灵感来自this repository

Answer 1

也许首先调整fetchDataWatcher内的循环，使其看起来更像这样

export function* fetchDataWatcher() {
  while (true) {
    yield take('FETCH_DATA');
    yield call(fetchData);
  }
}

也可以通过做这样的事情来改善路线

import { push } from 'react-router-redux';
import { put } from 'redux-saga/effects';

export function* fetchData() {
  ...
  console.log('fetched');
  yield put(push('/another-page'));
}

总的来说，我会毫不犹豫地put路线更改然后单独对其进行take，只有当您希望取消所有位置更改时（但我认为这就是您所追求的） :)）

Answer 2

这违背了saga的目的，即处理可能长时间运行的异步请求和返回。您可以改为在redux商店中设置状态，如此

export function* fetchData() {
  ...
  console.log('fetched');
  yield put(setRedirectState('/another-page'));
}

然后查看是否在ComponentWillUpdate中的容器中设置了重定向状态，并相应地重定向到这样的

import { push } from 'react-router-redux';
dispatch(push(state.redirecturl))

我还没有尝试过这个，但是我对React-boilerplate的体验，这是我首先尝试的。

Redux-saga在取消后调用动作

2 个答案: