代码之家 › 专栏 › 技术社区 › Guy

Redux Saga:登录按钮的加载指示器

saga redux-saga

0

Guy · 技术社区 · 7 年前

我们使用以下传说通过电话注册用户:

function* signup() {
    while (true) {
        const {phone} = yield take("APP_SIGNUP");

        nav.toCode();

        const responseSignup = yield call(fetch.signUp, phone);

        if (!responseSignup.success) {
            yield put({type: "SIGNUP_SERVER_ERROR"}); 
            continue;
        }

        let i;

        for (i = 0; i < 3; i++) {
            const {code} = yield take("APP_CHECK_CODE");

            // MARKED LINE
            const {success} = yield call(fetch.checkCode, {
                phone,
                code,
            });

            if (success) break;
            yield put({ type: "APP_CHECK_CODE_WRONG" });
       }

    // code ok
    if (i < 3) {
        nav.toTabs();
        yield put({ type: "APP_CHECK_USER" });
    }
 ...

用户输入他的电话号码,并显示一个屏幕,他在其中填写4位代码-你知道演习。

我们想添加一个加载指示器。有没有办法向调用应用程序检查代码操作*的人返回承诺?

*在代码中用“标记行”标记

1 回复 | 直到 7 年前

1

2

Martin Kadlec 7 年前

您可以从thunk返回一个承诺,但是如果您想坚持使用sagas,除了更改redux存储状态之外,没有简单的方法让发送操作的组件知道saga已经完成。

因此,我将使用一个减速器,例如:

export (state = {checkingCode: false}, action) => {
    switch (action.type) {
        case APP_CHECK_CODE:
            return {...state, checkingCode: true};
        case APP_CHECK_CODE_WRONG:
        case APP_CHECK_CODE_SUCCESS:
            return {...state, checkingCode: false};
        default:
            return state;
    }
}

然后显示/隐藏基于 checkingCode 价值

从理论上讲,如果您真的想让组件本身保持状态,您可以将类似于观察者的内容传递给传奇,然后等待。

// component
const observable = Observable.create(observer => {
    this.setState({loading: true});
    dispatch({type: APP_CHECK_CODE, observer});
});
observable.subscribe({
  complete: () => this.setState({loading: false}),
});


// saga
const {code, observer} = yield take("APP_CHECK_CODE")
...
observer.complete();

但老实说,这感觉很神奇,会给我带来更多的麻烦。