使用 put inside 匿名函数回调

Question

我正在将 Pusher 实现到我的 React+Redux Saga 应用程序中，但是我在某些回调中遇到了一些问题，我无法点击 put(...) 方法。在方法中使用 console.log(...) 等确实显示了，但我无法 put 到我的应用程序的状态。

我在 async/generator 函数的某些实现上可能是错误的，但我现在几乎卡住了。

我的代码来说明什么不会触发：

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

// Pusher actions
export const pusherConnecting = () => {
    return {
        type: ActionTypes.PUSHER_CONNECTING
    }
};

export const pusherConnectSucceeded = (client) => {
    return {
        type: ActionTypes.PUSHER_CONNECT_SUCCEEDED,
        client: client
    }
};

const pusherConnectFailed = (exception) => {
    return {
        type: ActionTypes.PUSHER_CONNECT_FAILED,
        message: exception
    }
};

// Pusher Saga
function * connectPusher(action) {
    try {
        const pusher = yield call(Api.connectPusher, action.directory, function(subscription) {
            subscription.bind(PUSHER_BIND_RELOAD, function() {
                location.reload(true);
            });

            subscription.bind(PUSHER_BIND_REQUEST_DATA, function(data) {
                if (data) {
                    put(updateDirectory(data));
                } else {
                    put(requestDirectory(action.directory.id));
                }
            });
        });

        pusher.connection.bind('connected', function() {
            put(pusherConnectSucceeded(pusher));
        });

        yield put(pusherConnecting());

    } catch (e) {
        yield put(pusherConnectFailed(e));
    }
}

export default function * pusherSaga() {
    yield * takeLatest(ActionTypes.DIRECTORY_FETCH_SUCCEEDED, connectPusher);
}



// My Api.ConnectPusher
export function * connectPusher(directory, subscription) {
    var pusher = new Pusher(PUSHER_KEY, {
        encrypted: true
    });

    var channels = ["test1", "test2"  ];

    for (var i = 0; i < channels.length; i++) {
        // Take each channel and callback with the subscription
        yield subscription(pusher.subscribe(channels[i]));
    }

    return pusher;
}

基于@Sebastien 的解决方案

yield put(yield onConnect(pusher));

function onConnect(pusher) {
    return new Promise((resolve, reject) => {
        pusher.connection.bind('connected', function() {
            resolve(pusherConnectSucceeded(pusher));
        });
    });
}

Answer 1

Redux-saga 不允许 put 不使用关键字 yield。 put 创建一个简单的 json object/effect，它必须是 interpreted/executed，如果你不屈服，它就不会屈服。

此外，即使使用 yield put(...)，如果这是在回调中完成的，它也不会被解释，因为 Redux-saga 没有在其解释器中运行回调的能力。它们只是运行作为普通回调，什么都不会发生。

如果 subscription.bind 应该 return 一个结果，您可以将该调用包装到一个函数中，该函数 return 是一个承诺，然后产生该承诺。

如果 subscription.bind 应该 return 结果流，您可能需要创建 channel 而不是。我想将来有人会发布一些可以轻松允许将 Observables 转换为 Redux-saga 流的东西

请注意，如果您不需要多次 unsubscribe/resubscribe，将此代码放在 saga 之外可能更简单，只需执行

        subscription.bind(PUSHER_BIND_RELOAD, function() {
            location.reload(true);
        });

        subscription.bind(PUSHER_BIND_REQUEST_DATA, function(data) {
            if (data) {
                reduxStore.dispatch(updateDirectory(data));
            } else {
                reduxStore.dispatch((requestDirectory(action.directory.id));
            }
        });

使用 put inside 匿名函数回调

Using put inside anonymous function callback

javascript

reactjs

redux

redux-saga