사가에 기록 인스턴스를 제공하는 방법은 무엇입니까?

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

지적한대로 기록을 싱글 톤으로 직접 사용하는 것이 하나의 옵션입니다. 또 다른 유사한 (논란의 여지가 없다면) 접근법은 redux 상태에 히스토리를 추가하는 것입니다. 그래서 당신의 무용담에서 선택 효과를 사용하여 히스토리 인스턴스를 얻습니다.

두 접근법 모두 히스토리를 싱글 톤으로 효과적으로 처리하지만 redux 상태로 저장하면 단위 테스트에서 히스토리 객체를 약간 조롱 할 수 있습니다. 필자가 쉽게 말하고자하는 것은 같은 기술을 사용하여 히스토리 오브젝트를 희생 상태의 다른 오브젝트를 조롱하는 것처럼 조롱 할 수 있다는 것입니다.

또한 히스토리 오브젝트를 다른 초기 상태와 함께 인스턴스화 할 수 있으므로 히스토리를 초기화하는 논리는 응용 프로그램 상태가 초기화되는 방법에 대한 예외가 아닙니다.