라우터 + Redex 반응 - 경로 변경 시 비동기 작업을 전송하시겠습니까?

라우터 + Redex 반응 - 경로 변경 시 비동기 작업을 전송하시겠습니까?

리듀렉스랑 리액터기를 사용하는 범용 리액션 앱이 있어.

나는 다음과 같은 몇 가지 경로를 가지고 있다.

/2016
/2015
/2014
/2013

등

각 경로에는 API의 데이터가 필요하다.현재, 나는 다음 것을 가지고 있다.<Link>탐색 구성 요소의 요소에서 비동기 작업 전송onClick이 경로에 대한 API의 데이터로 저장소를 채운다.

MVP를 위해서, 나는 단지 그 팀을 덮어쓰는 것뿐이다.post: {}경로가 변경될 때 새로운 포스트 컨텐츠가 포함된 스토어 내 컨텐츠는 API에 있는 새로운 컨텐츠를 얻을 수 있다.

액션 디스패쳐를 하는 사람들이 있는 것을 나는 깨달았다.<Link>버튼은 뒤로 버튼을 누르는 것이 이전 경로에 대한 콘텐츠를 얻기 위해 액션 디스패치를 다시 실행하지 않기 때문에 최적이 아니다.

경로 변경이 발생할 때마다 Raction Router가 발송 작업을 트리거하도록 하는 방법이 있는가? (특정 경로 집합을 듣기 위해 라우터를 제한하는 것은 보너스가 될 것이다.)

나는 내가 스토어에서 이력을 얻어야 한다는 것을 알지만, 현재로서는 새로운 콘텐츠를 얻기 위해 액션 디스패치를 실행함으로써 API를 다시 치는 것이 더 쉽다.

건배.

'라이프사이클' 후크onEnter그리고onChange이 질문에 대한 대부분의 다른 답변이 기한이 지난 4번 리액터(React-roouter 4는 이 질문에 대한 다른 답변의 대부분을 기한이 지난 답변으로 만든다.

목표를 달성하기 위해 구성 요소 수명주기 방법을 사용할 것을 권장하지만, 4번 반응기에서 작동하는 질문에 대한 답은 다음과 같다.

오늘날 작동하는 것은 Ract 라우터 개발자들이 직접 만든 History Library를 이용하여 역사 변화를 듣고 거기서 비동기식 작업을 보내는 것이다.

// history.js
import createHistory from "history/createBrowserHistory"

const history = createHistory()

// Get the current location.
const location = history.location

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
    //Do your logic here and dispatch if needed
})

export default history

그런 다음 응용 프로그램의 기록을 가져오십시오.

// App.js
import { Router, Route } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
        </div>
      </Router>
    )
  }
}

원본: 기록 라이브러리 라우터 문서 대응

Yeah React Router has onEnter and on Leave 후크.당신은 당신의 길을 만들 수 있다.store인스턴스(instance), 다음 도우미에서 액세스 가능:

const createRoutes = (store) => {
  const fetchPosts = () => store.dispatch({
    types: ['FETCH_POSTS', 'FETCH_POSTS_SUCCESS', 'FETCH_POSTS_FAIL',
    url: '/posts'
  });

  return (
    <Route path="/" component={App}>
      <Route path="posts" component={PostList} onEnter={fetchPosts}/>
      <Route path="posts/:id" component={PostDetail} />
    </Route>
  )
}

더 좋은 해결책은 또는 같은 것을 사용하는 것이다.이렇게 하면 네트워크에 닿지 않고 구성 요소를 테스트할 수 있는 기능을 유지하면서 구성 요소와 구성 요소의 데이터 종속성을 공동 배치할 수 있다.

편집: 더 이상 지원되지 않는 의 이전 버전에 적용됨react-router.

렌더 프로펠러 자체에서 다음 작업을 전송하는 것이 좋다.

<Route to="path" render={ props => {
  this.props.toggleInfoLayer(true);
  return <UserInfo />;
}} />

이것은 당신이 Redex를 사용하고 있다고 가정하는 것이다.mapDispatchToProps언쟁을 벌이다

승인된 답변에 언급된 기록 변경 이벤트 핸들러를 사용해 보았지만, 악성 파일에서 액션을 발송하는 것은 바람직하지 않다는 것을 알았다.Redex가 이미 너무 많은 양을 공급하고 있을 때, 한 군데 더 생각해 보아야 했다.

참조URL: https://stackoverflow.com/questions/37406584/react-router-redux-dispatch-an-async-action-on-route-change