サガに履歴インスタンスを提供するにはどうすればよいですか？

Question

ログインに成功した後、新しいページにリダイレクトしたいと思います。 ルート（V4）は、このように使用されています

import { browserHistory } from '....browser_history_signleton'; 

export function* loginSaga() { 
    while (true) { // eslint-disable-line no-constant-condition 
    try { 
     const payload = yield take(LOGIN_SUBMIT); 
     const raceResult = yield race({ 
     signin: call(loginRequest, payload), 
     logout: take('LOGOUT') 
     }); 
     if (raceResult.signin) { 
     const { data } = raceResult.signin; 
     yield put(loginRequestSucceeded(data)); 
     const redirectUrl = `.....based on location.state.from.pathname` 
     browserHistory.push(rediretUrl); 
     ... 

私の主な問題はbrowserHistoryを共有する方法である：よう

import { browserHistory } from '....browser_history_signleton'; 
... 

class App extends Component { 
    render() { 
    const { authentication: { isSignedIn } } = this.props; 
    return (
     <ConnectedRouter history={browserHistory}> 
     <div> 
      <Header/> 
      <Route exact path="/" component={Home}/> 
      <PrivateRoute isAuthorized={isSignedIn} path="/page1" component={PageOne}/> 
      <PrivateRoute isAuthorized={isSignedIn} path="/page2" component={PageTwo}/> 
     </div> 
     </ConnectedRouter> 
    ); 
    } 
} 

サガが見えます。 historyモジュールから createHistoryはsignletonではないので、私は追加する必要がありました：

// browser_history_signleton.js 
import createHistory from 'history/createBrowserHistory'; 

export const browserHistory = createHistory(); 

佐賀historyインスタンスを提供するための最も効率的な方法は何ですか？

Answer 1

あなたが指摘したように、履歴をシングルトンとして直接利用できるかどうかは1つの選択肢です。別の同様の（論争ではないにしても）アプローチは、還元状態に履歴を追加することです。だからあなたのサーガでは、選択した効果を使って履歴インスタンスを取得します。

両方のアプローチでは、履歴をシングルトンとして効果的に扱いますが、それをredux状態に格納することで、単体テストでヒストリオブジェクトを簡単にモックできます。私が簡単に言っているのは、同じテクニックを使ってヒストリオブジェクトを模倣して、レフィックス状態の他のオブジェクトを嘲笑することができるということです。

また、ヒストリオブジェクトを他の初期状態と一緒にインスタンス化すると、履歴を初期化するロジックがアプリケーション状態がどのように初期化されるかの例外ではありません。