Question

我正在尝试使getCart()生成器函数在reducer中返回到我的新状态，但是该状态正在“后期”。

仅在第二次点击按钮之后，我才需要进入状态。

注意：我强制执行的控制台上的错误是一个操作。

import { call, put, select, all, takeLatest } from 'redux-saga/effects';

import { TYPES } from './reducer';
import { getCart, getCartSuccess, getCartFail } from './actions';
import API from 'services/JsonServerAPI';

export function* getCartList() {
  try {
    const response = yield call(API.get, '/2cart');
    yield put(getCartSuccess(response.data));
  } catch (error) {
    yield put(
      getCartFail(error.response ? error.response.statusText : error.message)
    );
  }
}

export function* addToCart({ id }) {
  yield put(getCart());
  yield select(({ CartReducer }) => {
    console.log(CartReducer);
  });

  console.log(id);
}

// prettier-ignore
export default all([
  takeLatest(TYPES.GET, getCartList),
  takeLatest(TYPES.ADD, addToCart)
]);

Answer 1

由于getCartList执行异步操作，因此您需要某种方式来等待addToCart中的操作完成后再进行记录。

一个选择是直接从getCartList传奇中调用addToCart，而无需调度Redux操作-如果您有依赖于调度TYPES.GET的其他中间件，则这可能不是首选。

export function* addToCart({ id }) {
  // call the `getCartList` saga directly and wait for it to finish before continuing
  yield call(getCartList);
  yield select(({ CartReducer }) => {
    console.log(CartReducer);
  });

  console.log(id);
}

另一个选择是take传奇完成后将分派的动作列表上的getCartList：

export function* addToCart({ id }) {
  yield put(getCart());
  // wait until one of the success or failure action is dispatched, sub with the proper types
  yield take([TYPES.GET_SUCCESS, TYPES.GET_FAILURE]);
  yield select(({ CartReducer }) => {
    console.log(CartReducer);
  });

  console.log(id);
}

这也有一些潜在的折衷-您需要确保take中的操作列表与getCartList可以put的所有可能的结束类型保持最新，并且您需要确保您继续使用takeLatest（相对于takeEvery）来触发addToCart，这样您就不会最终遇到可以满足take子句的并发sagas。< / p>

如何使用Redux-Saga获得新状态？

1 个答案: