reactjs - 在 react redux saga 中处理同步
问题描述
用户将输入姓名电子邮件和订单信息,包括付款详情。在从表单中单击“立即购买”按钮时,我计划执行以下步骤:
- 通过 api 调用创建用户。
- 通过 api 调用自动登录并获取令牌。
- 使用表单数据通过 api 调用创建订单。
- 通过 api 调用获取支付提供商令牌。
- 进入支付页面。
使用 React-redux-saga 作为前端。
请在下面的代码:
function* addToCartCamp(action) {
try {
// User creation and login
yield put({ type: authActions.AUTH_REGISTER_REQUEST, ...createUser });
yield put({ type: authActions.AUTH_REGISTER_SUCCESS, ...userdata });
yield put({ type: authActions.AUTH_LOGIN_REQUEST, ...login });
//Create order
const { data } = yield orderAPI.addToCartCamp(action);
yield put({ type: orderActions.ADD_TO_CART_SUCCESS, ...data });
yield put({ type: orderActions.GET_DETAIL_ORDER_REQUEST, ...{orderId: order_id} });
//Handle Payment
if(action.payment.method === 'creditCard'){
yield put({ type: orderActions.TOKEN_REQUEST, ...{orderId: order_id} });
} else{
yield put({ type: orderActions.BANK_TRANSFER_REQUEST, ...{orderId: order_id} });
}
} catch (error) {
// handle error message
}
}
我可以在 saga 文件中调用多个 Yield put,然后调用 api。调用此函数时,后端甚至在创建并登录用户之前就开始了订单创建过程。
我需要所有进程同步运行,但它们当前异步运行。
新的传奇和反应。这个怎么处理。?
解决方案
tl;dr:你需要take()
一个动作和api在成功动作call()
之前产生它的结果。put()
例子
function* addToCartCamp(action) {
try {
const action = yield take(authActions.AUTH_REGISTER_REQUEST);
const userToCreate = action.payload;
const userData = yield call(authApi.createUser, userToCreate);
yield put({ type: authActions.AUTH_REGISTER_SUCCESS, userData });
const sessionData = yield call(authApi.loginUser, userData);
yield put({ type: authActions.AUTH_LOGIN_SUCCESS, sessionData });
// ...
}
}
补充说明
在我看来,你在一个传奇中发生了太多事情。为什么要在创建订单的同一个地方注册用户?我会将这两个用例分成两个不同的 saga,因为您可能有一个已经注册的用户,只需要在购买之前登录。不要在您的订单传奇中处理身份验证,让 API 处理身份验证失败。
说到这,您还应该对 api 调用的 FAILURE 采取措施。因此,当服务器返回 401 因为用户无权购物时,您应该使用减速器yield put
执行特定orderActions.SOMETHING_FAILURE
操作来存储错误消息、处理挂起状态等。
拥有全局 try catch 块会使调试变得非常困难,应该避免。请参阅https://github.com/redux-saga/redux-saga/blob/master/docs/basics/ErrorHandling.md(最后一个代码示例):
import Api from './path/to/api'
import { call, put } from 'redux-saga/effects'
function fetchProductsApi() {
return Api.fetch('/products')
.then(response => ({ response }))
.catch(error => ({ error }))
}
function* fetchProducts() {
const { response, error } = yield call(fetchProductsApi)
if (response) {
yield put({ type: 'PRODUCTS_RECEIVED', products: response })
} else {
yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
}
}
推荐阅读
- android - ClassNotFoundException DynamiteModuleInitializer Android
- javascript - 了解代码片段中的条件运算符和条件赋值
- c# - asp.net mvc 5中的下拉列表不同
- php - while循环只输出一行
- c - 如果文件不退出,则在 C 中创建和写入
- java - 带有 WildFly 的 JavaEE:未找到剩余资源 - 为什么?
- matlab - 从混合单元格/字符串转换/创建矩阵的有效方法
- java - RxJava2 组合多个 observable 使它们返回单个结果
- r - 将 select_helpers 与 dplyr::coalesce 一起使用
- google-sheets - Google 表格显示具有多个匹配单元格的行