Redx를 사용한 리액트 라우터 변경에 대응하여 새 데이터를 가져오는 방법

Redx를 사용한 리액트 라우터 변경에 대응하여 새 데이터를 가져오는 방법

Redux, Redux-router 및 reactjs를 사용하고 있습니다.

경로 변경 정보를 가져오는 앱을 만들려고 하는데, 다음과 같은 것이 있습니다.

<Route path="/" component={App}>
    <Route path="artist" component={ArtistApp} />
    <Route path="artist/:artistId" component={ArtistApp} />
</Route>

에 들어갈 때artist/<artistId>아티스트를 검색하여 정보를 렌더링하고 싶습니다.문제는, 이 일을 하는 가장 좋은 방법이 무엇인가 하는 것입니다.

RxJ를 사용하거나 미들웨어를 사용하여 요청을 관리하는 등 이에 대한 해답을 찾았습니다.여기서 궁금한 것은 이것이 정말 필요한가, 아니면 아키텍처에 의존하지 않고 반응할 수 있는 방법인가 하는 것입니다.필요한 정보를 react componentDidMount() 및 componentDidUpdate()에서 가져올 수 있습니까?지금은 정보를 요구하는 기능에서 액션을 트리거하여 정보가 도착하면 컴포넌트가 다시 렌더링됩니다.이 컴포넌트에는 다음 사항을 알려주는 속성이 있습니다.

{
    isFetching: true,
    entity : {}
}

감사합니다!

여기서 궁금한 것은 이것이 정말 필요한가, 아니면 아키텍처에 의존하지 않고 반응할 수 있는 방법인가 하는 것입니다.필요한 정보를 react componentDidMount() 및 componentDidUpdate()에서 가져올 수 있습니까?

그건 정말 할 수 있어요componentDidMount()그리고.componentWillReceiveProps(nextProps).
다음은 Redx의 예에서 수행하는 작업입니다.

function loadData(props) {
  const { fullName } = props;
  props.loadRepo(fullName, ['description']);
  props.loadStargazers(fullName);
}

class RepoPage extends Component {
  constructor(props) {
    super(props);
    this.renderUser = this.renderUser.bind(this);
    this.handleLoadMoreClick = this.handleLoadMoreClick.bind(this);
  }

  componentWillMount() {
    loadData(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.fullName !== this.props.fullName) {
      loadData(nextProps);
    }

  /* ... */

}

Rx로 더 세련되게 만들 수 있지만, 전혀 필요 없습니다.

다음과 같은 일반 라우터 on Enter/onLeave 콜백 소품에서의 커스텀바인딩을 실시했습니다.

const store = configureStore()

//then in router
<Route path='/myRoutePath' component={MyRouteHandler} onEnter={()=>store.dispatch(myRouteEnterAction())} />

좀 허술하지만 효과가 있고, 지금으로서는 더 나은 해결책을 알 수 없습니다.

1) 경로 변경에 대한 낙관적 요청 액션을 발송한다.BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

2) 비동기 액션: http://redux.js.org/docs/advanced/AsyncActions.html

언급URL : https://stackoverflow.com/questions/32846337/how-to-fetch-the-new-data-in-response-to-react-router-change-with-redux