Redux：ミドルウェアのオン/オフを切り替える

Question

ミドルウェアをオン/オフする方法を探しています。私はチュートリアル機能を導入しました。ユーザーがUIを使って何をしているのか聞いて、それぞれのアクションを「ガイダンス」ミドルウェアでチェックします。ユーザーが適切な場所をクリックすると、チュートリアルの次のステップに移動します。ただし、この動作は、チュートリアルモードがオンの場合にのみ必要です。何か案は？時間の95％に〜、しかしチュートリアルモードを

const guidance = store => next => action => { 

    let result = next(action) 

    const state = store.getState(); 
    const { guidanceState } = state; 
    const { on } = guidanceState; 

    if (on) { 

.... 

希望：今、私のソリューションはguidanceStateリデューサのスイッチや汚れミドルウェアでそれをチェックし、「上」を維持するためだったため

const store = createStore(holoApp, compose(applyMiddleware(timestamp, ReduxThunk, autosave, guidance), 
window.devToolsExtension ? window.devToolsExtension() : f => f)); 

とても汚れていて、毎回すべての行動をチェックするのがちょっと、よく、汚いと感じる...;）他の方法はありますか？

Answer 1

ミドルウェアでステートフルなものを実行しないでください（Sagasのような状態を管理するための良いパターンがない限り）。あなたがそれを避けることができれば、ミドルウェアスタックではステートフルなことをしないでください。 （はでなければなりません。@TimoSta's solutionが正しいです）。

代わりに、減速機を使用してツアーを管理する：

const finalReducer = combineReducers({ 
    // Your other reducers 
    tourState: tourReducer 
}); 

function tourReducer(state = initalTourState, action) { 
    switch(action.type) { 
    case TOUR_LAST_STEP: 
     return /* compose next tour step state here */; 
    case TOUR_NEXT_STEP: 
     return /* compose last tour step state here */; 
    case TOUR_CLOSE: 
     return undefined; // Nothing to do in this case 
    default: 
     return state; 
    } 
} 

次に、アプリケーション内で強調表示を移動するtourStateの現在の状態を使用して、何もtourStateに存在しない場合、ツアーをオフにしてください。

store.subscribe(() => { 
    const state = store.getState(); 
    if (state.tourState) { 
    tourManager.setTourStep(state.tourState); 
    } else { 
    tourManager.close(); 
    } 
}); 

あなたはどちらか、ステートフルツアーマネージャーを使用する必要はありません - あなたが反応使用している場合、それだけでconnectラッパーでtourStateを引き出し、何の状態が存在しない場合nullをレンダリングするコンポーネントとすることができます

あなたが考えることができ

// waves hands vigorously 
const TourComponent = (props) => { 
    if (props.currentStep) return <TourStep ...props.currentStep />; 
    return null; 
} 

Answer 2

私はreduxのAPI経由でミドルウェアをオンザフライで置き換える方法について知らない。

代わりに、古いストアの状態を初期状態として、まったく新しいストアを作成し、新しいミドルウェアのセットを作成することができます。これはアプリケーションとシームレスに動作します。

Answer 3

三アイデア：

• は、ミドルウェアは、 "GUIDANCE_START" と "GUIDANCE_STOP" アクションに耳を傾けてもらいます。それらが通過し、いくつかの動作を更新し、実際にnextに渡さないでください。
• あなたはこれではなく、佐賀のようなもののために良いユースケースであるかもしれない
• （https://github.com/reactjs/redux/issues/2041でやや関連の議論を）内部で独自のミドルウェア・パイプラインを構築するミドルウェアを書き、必要に応じて動的に指導ミドルウェアを追加し、削除することができミドルウェアよりも。 Key&Pad app（ソース：https://github.com/joshwcomeau/key-and-pad/blob/master/src/sagas/onboarding.saga.js#L47-L75）