RxJS：將第一個源排隊，直到第二個源滿足謂詞

Question

如何使用RxJS實現此方案。

當我想獲取用戶（第一來源）時，我需要檢查互聯網連接（第二來源）。 如果沒有連接互聯網，則將第一個源排隊，直到重新打開互聯網。 如果互聯網重新打開，請發出第一個信號源。 我可以制作下一個，但是直到第二個源為真時，我才開始思考如何排隊第一個源。

請在這里檢查我的代碼：

const userEpic = action$ =>
  action$.ofType(USER_REQUEST)
    .withLatestFrom(action$.ofType(CONNECTION))
    .filter(([first, second]) => second.value === true)
    .do(a => console.log('can fetch a user'))    
    .mapTo({ type: SUCCESS });

http://jsbin.com/zomikukiqi/1/edit?js，控制台，輸出

Answer 1

嘗試buffer()來存儲USER_REQUEST，直到CONNECTION觸發緩沖區刷新為止。

 const USER_REQUEST = 'USER_REQUEST'; const CONNECTION = 'CONNECTION'; const SUCCESS = 'SUCCESS'; const requestUser = () => ({ type: USER_REQUEST }); const connection = (x) => ({ type: CONNECTION, value: x }); const bufferedUserRequests$ = (action$, store) => action$.ofType(USER_REQUEST) .filter(x => !store.getState().connectionStatus) .buffer(action$.ofType(CONNECTION)) const unbufferedUserRequests$ = (action$, store) => action$.ofType(USER_REQUEST) .filter(x => store.getState().connectionStatus) .map(request => [request]) const userEpic = (action$, store) => Rx.Observable.merge( bufferedUserRequests$(action$, store), unbufferedUserRequests$(action$, store) ) .flatMap(bufferArray => bufferArray.map(request => Rx.Observable.of(request)) ) .do(a => console.log('can fetch a user')) .mapTo({ type: SUCCESS }) const reducer = (state = { connectionStatus: false}, action) => { switch (action.type) { case CONNECTION: return { ...state, connectionStatus: action.value } default: return state; } }; // components/App.js const { connect } = ReactRedux; let App = ({ requestUser, connection, connectionStatus }) => ( <div> <button onClick={requestUser}>Start Request</button> <p>Internet Connection: {connectionStatus.toString()}</p> <button onClick={() => connection(false)}>Disconnect</button> <button onClick={() => connection(true)}>Connect</button> </div> ); App = connect( ({ connectionStatus }) => ({ connectionStatus }), { requestUser, connection } )(App); // redux/configureStore.js const { Provider } = ReactRedux; const { createStore, applyMiddleware } = Redux; const { createEpicMiddleware } = ReduxObservable; const epicMiddleware = createEpicMiddleware(userEpic); const store = createStore(reducer, applyMiddleware(epicMiddleware) ); // index.js ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); 

 <script src="https://unpkg.com/react@15.2.1/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15.2.1/dist/react-dom.min.js"></script> <script src="https://unpkg.com/redux@^3.5.2/dist/redux.min.js"></script> <script src="https://unpkg.com/react-redux@4.4.5/dist/react-redux.min.js"></script> <script src="https://unpkg.com/@reactivex/rxjs/dist/global/Rx.js"></script> <script src="https://unpkg.com/redux-observable/dist/redux-observable.min.js"></script> <div id="root"></div>