REST API와 대응 - 마운트시 상태 또는 GET 하시겠습니까?

Question

현재 Node에서 제공하는 REST API 백엔드로 React-Redux 프론트 엔드를 만들고 있습니다. Redux를 사용할지 또는 API를 호출 할 때 구성 요소를 마운트할지 여부는 확실하지 않습니다.

구성 요소는 사이트 전체에 걸쳐 표시되지만 (지속적이지는 않은) 간단한 프로필 목록입니다.

죄송합니다. 가용 한 것을 읽을만한 것이 있을까요?

Answer 1

나는 두 가지에서 살펴 봐야 당신을 조언합니다 : 페이스 북의 첫 번째 반작용 튜토리얼은 매우 과소 평가입니다

1) : https://facebook.github.io/react/docs/thinking-in-react.html

그것은 생각하는 방법에 대해 생각하는 아주 명확한 방법을 노출 당신의 견해에 대한 나무 구조에 대해서. https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

이 게시물이 너무 자주 두 가지가 할 구성 요소에 반응하는 설명 : 렌더러로 행동하고, V와 C 모두 복용 컨트롤러 (로

2) 여기에서, 컨테이너 및 구성 요소에 대한 책을 읽은로 이동 MVC에서).

이제 반응보기에 컨트롤러가 필요합니다. 구성 요소를 마운트 할 때마다 정보를 가져 오는 방법과 정보를 표시하는 방법, 정보를 가져 오는 방법의 두 가지 문제가 있습니다.

class MyApp extends React.Component { 
    componentDidMount() { 
    fetch('/profiles').then(res => res.json().then(::this.setState)) 
    } 
    render() { 
    if (this.state) { 
     return <ProfileList profiles={this.state} /> 
    } else { 
     return <span>Loading...</span> 
    } 
    } 
} 

당신의 "컨테이너"다음과 같습니다

당신은 하나와 함께 할 수는 큰 응용 프로그램의 전체 상태를 관리 구성 요소를 반응한다. 귀하의 "구성 요소"정보가 검색 한 방법에 대해 신경 쓰지 필요가 프로파일 목록의 순수한 표현입니다 :

class ProfileList extends React.Component { 
    render() { 
    return <ul> 
     { 
     this.props.profiles.map(
      profile => <li key={profile.id}>{profile.name}</li> 
     ) 
     } 
    </ul> 
    } 
} 

돌아 오는 정보의 더 나은 재사용을 가능하게이 일을 또 다른 방법입니다 것을한다 다른 구성 요소에서 사용 가능한 동일한 정보 (믹스 인으로 "상점"의 인스턴스를 숨김). 구조의 상단에있는 MyApp 클래스는 redux의 Provider 클래스와 비슷한 기능을합니다. 즉, 하위 구성 요소가 자신을 표시하는 데 필요한 정보에 액세스 할 수있게합니다.