React Redux 앱의 서버에서 초기 데이터를 가져오려면 어디로 가야 합니까?

React Redux 앱의 서버에서 초기 데이터를 가져오려면 어디로 가야 합니까?

리액트/리덕스를 배우기 시작했는데, 매우 기본적인 질문인 것을 우연히 발견했습니다.아래는 내 앱의 일부이며, 심플함을 위해 코드를 삭제한 것입니다.

기본적으로 비어 있는 사이트 배열로 상태가 표시됩니다.나중에 리덕터에는LOAD_SITES사용자가 다른 페이지로 페이지를 이동할 때마다 다른 사이트 집합을 로드하는 작업입니다. 하지만 지금은 아무 작업도 하지 않습니다.렌더링을 통해 반응 시작PublishedSitesPage그 결과,PublishedSitesBox데이터를 루프하여 개별 사이트를 렌더링합니다.

디폴트의 빈 어레이로 모든 것을 렌더링 해, 동시에 「서버로부터의 사이트 로드」의 약속을 개시해, 해결되면, 디스패치를 실시합니다.LOAD_SITES액션.이 전화를 거는 가장 좋은 방법은 무엇입니까?난 어떤 건설업자에 대해 생각하고 있었어PublishedSitesBox또는 아마도componentDidMount그러나 이것이 효과가 있을지 어떨지 모르겠습니다.저는 이런 식으로 끝없는 루프를 만들어 계속 재렌더링을 할 수 있을지 걱정입니다.어떤 식으로든 이 끝없는 루프를 막을 수 있을 것 같아요 "요청된 상태"와 같은 다른 상태 매개 변수를 갖게 함으로써요Initial Data"를 클릭합니다.또 다른 생각은 그냥 하고 나서 바로 이 약속을 하는 것이다.ReactDOM.render()이렇게 하는 가장 좋고 깨끗한 방법은 무엇일까요?

export default function sites(state = [], action) {
  switch (action.type) {
    default:
      return state;
  }
}
...

const publishedSitesPageReducer = combineReducers({
  sites
});

ReactDOM.render(
  <Provider store={createStore(publishedSitesPageReducer)}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

...

export default function PublishedSitesPage() {
  return (
    <PublishedSitesBox/>
  );
}

...

function mapStateToProps(state) {
  return { sites: state.sites };
}

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => {
  // render sites
});

이 데이터 로드 로직이 React 컴포넌트에 영향을 줄 이유가 전혀 없습니다.여기서 원하는 것은 리듀서에 액션을 디스패치하겠다는 약속을 반환하는 것입니다.리듀서는 스토어를 적절히 변경하여 React 컴포넌트를 적절히 재렌더합니다.

(ReactDOM.render를 호출하기 전 또는 후에 비동기 호출을 시작하든 상관없습니다.약속은 어느 쪽이든 유효합니다.)

다음과 같은 경우:

var store = createStore(publishedSitesPageReducer);

someAsyncCall().then(function(response) {
  store.dispatch(someActionCreator(response));
});

ReactDOM.render(
  <Provider store={store}>
    <PublishedSitesPage />
  </Provider>,
  this.$view.find('.js-published-sites-result-target')[0]
);

React 컴포넌트는 스토어의 소비자이지만 스토어의 유일한 소비자가 될 필요는 없습니다.

이 방법에는 명확한 예가 있습니다: Facebook Tutorial

엔드리스 루프에 대해서는 어레이가 더 이상 비어 있지 않으면 인터벌을 클리어합니다.이렇게 하면 루프가 방지됩니다.

언급URL : https://stackoverflow.com/questions/36784139/where-do-i-fetch-initial-data-from-server-in-a-react-redux-app