Redux: react-router의 경로 전환에 대한 응답으로 작업 실행

@deowk this.props 와 nextProps 를 비교하여 관련 데이터가 변경되었는지 확인할 수 있습니다. 변경되지 않은 경우 작업을 다시 트리거 할 필요가 없으며 무한 루프를 벗어날 수 있습니다.

@johanneslumpe : 제 경우에는 캠페인 그룹이 다소 큰 개체 모음입니다. 이런 식으로 깊은 개체 비교를 조건으로 사용하는 것이 비효율적 인 것 같습니다.

@deowk 불변 데이터를 사용하면 참조를 비교할 수 있습니다.

@deowk 이 문제에는 두 부분이 있습니다. 첫 번째는 componentWillReceiveProps() 은 상태 변경에 응답하는 데 이상적인 방법이 아니라는 것입니다. 대부분 Redux에서 하는 것처럼 적 으로 생각 명령 적 으로 생각해야하기 때문입니다. 해결책은 현재 라우터 정보 (위치, 매개 변수, 쿼리)를 _inside_ 저장소에 저장하는 것입니다. 그러면 모든 상태가 동일한 위치에 있고 나머지 데이터와 동일한 Redux API를 사용하여 구독 할 수 있습니다.

트릭은 라우터 위치가 변경 될 때마다 실행되는 작업 유형을 만드는 것입니다. 이것은 곧 출시 될 React Router 1.0 버전에서 쉽습니다.

// routeLocationDidUpdate() is an action creator
// Only call it from here, nowhere else
BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

이제 상점 상태는 항상 라우터 상태와 동기화됩니다. 그러면 위의 구성 요소에서 쿼리 매개 변수 변경 및 setState() 에 수동으로 반응 할 필요가 없습니다. Redux의 커넥터를 사용하기 만하면됩니다.

<Connector select={state => ({ filter: getFilters(store.router.params) })} />

문제의 두 번째 부분은 경로 변경에 대한 응답으로 작업을 실행하는 것과 같이 뷰 레이어 외부의 Redux 상태 변경에 대응하는 방법이 필요하다는 것입니다. 원하는 경우 설명하는 것과 같은 간단한 경우에 componentWillReceiveProps를 계속 사용할 수 있습니다.

하지만 더 복잡한 경우라면 RxJS를 사용하는 것이 좋습니다. 이것이 바로 옵저버 블이 설계된 반응 데이터 흐름입니다.

Redux에서이를 수행하려면 먼저 관찰 가능한 스토어 상태 시퀀스를 생성합니다. redux-rx의 observableFromStore() 사용하여이를 수행 할 수 있습니다.

import { observableFromStore } from 'redux-rx';
const state$ = observableFromStore(store);

그런 다음 특정 상태 변경을 구독하기 위해 관찰 가능한 연산자를 사용하면됩니다. 다음은 성공적인 로그인 후 로그인 페이지에서 리디렉션하는 예입니다.

const didLogin$ = state$
  .distinctUntilChanged(state => !state.loggedIn && state.router.path === '/login')
  .filter(state => state.loggedIn && state.router.path === '/login');

didLogin$.subscribe({
   router.transitionTo('/success');
});

이 구현은 componentDidReceiveProps() 와 같은 명령형 패턴을 사용하는 동일한 기능보다 훨씬 간단합니다.

도움이 되었기를 바랍니다.

새 문서에서 필요합니다. 너무 잘 쓰여졌습니다.

@acdlite : 대단히 감사합니다. 귀하의 조언은 정말 저를 많이 도왔습니다.하지만 URL 변경에 대한 응답으로 액션 크리에이터를 트리거하여 스토어에서 상태를 변경하는 데 어려움을 겪고 있습니다.

이것은 react-router v0.13.3의 유일한 옵션처럼 보이기 때문에 willTransitionTo 정적 메서드에서 액션 생성자를 트리거하고 싶습니다.

class Results extends Component  {
..........
}

Results.willTransitionTo = function (transition, params, query) {
 // how do I get a reference to dispatch here?
};

@deowk 내 생각 엔 redux 인스턴스에서 직접 dispatch 호출하는 것입니다.

const redux = createRedux(stores);
BrowserHistory.listen(location => redux.dispatch(routeLocationDidUpdate(location)));

@deowk 현재 다음과 같이 반응 라우터 0.13.3에서 URL 변경 사항을 발송합니다.

Router.run(routes, Router.HistoryLocation, function(Handler, locationState) {
   dispatch(routeLocationDidUpdate(locationState))
   React.render(<Handler/>, appEl);
});

@acdlite 정말 잘 설명했습니다! : +1 :
새 문서에도 있어야한다는 데 동의합니다. :)

참고로 BrowserHistory.history() 이 BrowserHistory.addChangeListener() 변경되었습니다.

https://github.com/rackt/react-router/blob/master/modules/BrowserHistory.js#L57

편집하다:

다음과 같이 보일 수 있습니다.

history.addChangeListener(() => store.dispatch(routeLocationDidUpdate(location)));

그리고 감속기 @pburtchaell의 초기 상태는 어떻습니까?

다음 설정이 있습니다.

// client.js
class App extends Component {
  constructor(props) {
    super(props);
    this.history = new HashHistory();
  }

  render() {
    return (
      <Provider store={store}>
         {renderRoutes.bind(null, this.history)}
      </Provider>
    );
  }
}

// routes.js
export default function renderRoutes(history) {

  // When the route changes, dispatch that information to the store.
  history.addChangeListener(() => store.dispatch(routeLocationDidUpdate(location)));

  return (
    <Router history={history}>
      <Route component={myAppView}>
        <Route path="/" component={myHomeView}  />
      </Route>
    </Router>
  );
};

이렇게하면 경로가 변경 될 때와 앱이 처음로드 될 때마다 routeLocationDidUpdate() 작업 생성기가 실행됩니다.

@pburtchaell 당신은 당신의 routeLocationDidUpdate 를 공유 할 수 있습니까?

@gyzerok 물론입니다. 액션 크리에이터입니다.

// actions/location.js
export function routeLocationDidUpdate(location) {
  return {
    type: 'LOCATION_UPDATE',
    payload: {
      ...location,
    },
  };
}

@pburtchaell 그래서 귀하의 예에서는 특정 경로에 필요한 데이터를 어디에서 가져 오는지 조용히 이해하지 못합니다.

위의 예제의 전체 버전은 다음과 같습니다.

https://github.com/acdlite/redux-react-router/blob/master/README.md#bonus -reacting-to-state-changes-with-redux-rx

@pburtchaell 이 해당 코드의 비동기 버전을 사용하여 REST 호출 등에서 데이터를 가져올 것이라고 가정합니다. 내가 확실하지 않은 것은 무엇입니까? 그런 다음 상점으로 이동한다고 가정하지만 해당 상점은

<strong i="7">@connect</strong>

안으로, 말하자

<Comments />

어떤 것이 이미 commentStore에 '연결'(구독)되어 있습니까? 또는 이러한 위치 작업을 commentsStore에 등록하면됩니다.

다음과 같은 URL

/comments/123

항상 주석 구성 요소에 '결합'되므로 어떻게 재사용합니까? 이것이 멍청한 경우 죄송합니다. 여기에서 매우 혼란 스럽습니다. 내가 찾을 수있는 확실한 예가 있었다.

나는 또한 이것과 씨름하면서 내 정적 fetchData(dispatch, params) 메서드를 호출하는 방법을 알아 내고 있습니다 (정적, 서버가 초기 렌더링 전에 비동기 FETCH 작업을 전달하기 위해 호출하기 때문입니다).

컨텍스트 내에 dispatch 대한 참조가 존재하기 때문에 fetchData 의 클라이언트 측 호출을 위해 이것을 얻는 가장 깨끗한 방법은 다음을 호출하는 Connector 와 유사한 구성 요소라고 생각합니다. fetchData 또는 shouldFetchData 또는 select 콜백이 dispatch 와 함께 state dispatch 대한 참조를 가져 와서 현재 store 및 필요에 따라 FETCH 작업을 전달합니다.

후자는 더 간결하지만 select 는 순수한 함수로 유지되어야한다는 사실을 깨뜨립니다. 전자를 살펴 보겠습니다.

내 솔루션은 내 설정에 맞게 조정되었지만 (비동기 _FETCH 작업을 전달하는 정적 fetchData(dispatch, state) 메서드) 적절한 속성을 사용하여 전달 된 모든 콜백을 호출합니다. https : // gist.github.com/grrowl/6cca2162e468891d8128 —

문서를 추가해야합니다! "반응 라우터와 함께 사용"섹션에서 가능합니다.

1.0 릴리스 이후에 공식적인 방법이 있습니다.

@gaearon을 듣고 반갑습니다.

그런 다음 특정 상태 변경을 구독하기 위해 관찰 가능한 연산자를 사용하면됩니다.

내 매장을 경로 변경과 동기화 상태로 유지하기 위해 관찰 가능한 스트림을 설정했고 내 매장을 시청할 수있는 스트림 설정도 있습니다. 내 스토어에서 값이 변경 될 때, 특히 내 앱의 다른 곳에서 양식을 성공적으로 제출 한 결과 undefined 에서 유효한 문자열로 변경 될 때 새 경로로 전환하는 데 관심이 있습니다.

두 스트림이 설정되고 작동하며 저장소가 업데이트되고 있지만 Rx를 처음 사용하고 관찰 가능한 쿼리에 문제가 있습니다 ... 포인터가 있습니까? 내가 올바른 길을 가고 있는가? distinctUntilChanged 있지만 현재 제 국수를 굽고 있습니다. 어떤 도움을 주셔서 감사합니다. :)

편집 : 알았어! 죄송합니다. 제 질문에 답했습니다. 아래의 의사 코드. 무섭게 보이면 알려주세요?

const didChangeProject$ = state$
  .distinctUntilChanged(state => state.project._id)
  .filter(state => typeof state.project._id !== 'undefined');

# 177에 찬성하여 마무리. 라우팅을 문서화 할 때 상태 변경시 리디렉션, 요청 콜백시 리디렉션 등 모든 시나리오를 다루어야합니다.

나는 이것이 닫혔다는 것을 알고있다. 그러나 React 0.14와 베타 버전의 다양한 1.0 의존성으로 이것에 대한 업데이트가 있고 그렇지 않다면 React 0.14, react-router, redux 등의 새로운 기능에 대한 튜토리얼이 될 수 있습니다. 쓴? 이 모든 것을 동시에 배우고 이해하면서 다가오는 변경 사항에 대한 최신 정보를 유지하려는 많은 사람들이있는 것 같습니다. 나는 상황이 유동적이라는 것을 알고 있지만 (말장난 .. 어 .. 의도하지 않은) 다른 예제에서 서로 잘 어울리지 않는 조각을보고있는 것 같습니다. 그리고 며칠 후에도 업데이트 된 앱을 작동시킬 수 없습니다. 라우팅. 이 모든 것이 어떻게 작동하는지 이해하는 데 여전히 어려움을 겪고 있기 때문에 내 잘못 일 가능성이 높으며 최신 항목으로 업데이트 된 튜토리얼이 곧 나올 것으로 기대합니다.

튜토리얼이있을 때까지 라우팅이있는 examples/real-world 를 자유롭게 살펴보십시오. 지금은 "최신 및 최고"는 아니지만 잘 작동합니다.