React-Flux 초기 상태로드

Question

Axis가있는 React Flux 앱에서 Ajax 요청을하려고하는데 상태가 설정된 후에 데이터를 가져옵니다.

InitialData.getInitialPosts(); 

은 다음과 같습니다 API 요청 :

내가 루트 응용 프로그램에서이 코드를

let LoadInitialData = { 
    getInitialPosts(){ 
     Dispatcher.dispatch({ 
      actionType: 'LOAD_INITIAL_POSTS', 
      initialPosts: { 
       posts: PostsApi.getAllPosts() 
      } 
     }) 
    } 
} 

export default LoadInitialData; 

:

행동에

let PostsApi = { 
    getAllPosts(){ 
     return axios.get('https://jsonplaceholder.typicode.com/posts') 
      .then((response) => { 
       console.log('All posts: ', response.data) 
       return response.data; 
     }); 
    } 
} 

export default PostsApi; 

/initialData.js을 나는이 있습니다

매장 정보 :

보기 0

:

CONSOLE.LOG에

export default class PostsPage extends React.Component { 

    constructor(){ 
     super(); 

     this.state = { 
      posts: [] 
     } 
    } 

    componentDidMount(){ 
     this.setState({ 
      posts: PostsStore.getAllPosts() 
     }); 
    } 

    render(){   
     const { posts } = this.state; 
     return(
      <div> 
       {posts.map(post => { 
        return <h3 key={post.id}>{post.title}</h3> 
       })} 
      </div> 
     ) 
    } 
} 

:

상태 : 개체 {게시물 : 배열 [0]}

상태 : 개체 {게시물 : 약속}

postsApi.js : 7 모든 글 : [개체, 개체, 개체, 개체, 개체, 개체 ...]

그리고 문제는 ajax 요청은 componentDidMount 이후입니다.

Answer 1

PostsPage 구성 요소가 상점의 변경 사항을 청취하기 위해 올바르게 설정되지 않았습니다. 가지고있는 코드는 처음 게시 될 때 번만 번 게시물의 목록 만 가져옵니다. Store에서 새 데이터를 가져올 때마다 업데이트하려고합니다.

이렇게하려면 저장소에서 설정 한 변경/추가 변경 수신기 기능을 사용해야합니다. 다음과 같이 보일 것입니다.

export default class PostsPage extends React.Component { 

    constructor(){ 
     super(); 

     this.state = { 
      posts: [] 
     } 
    } 

    _calculateState(){ 
     this.setState({ 
      posts: PostsStore.getAllPosts() 
     }); 
    } 

    componentDidMount(){ 
     PostsStore.addChangeListener(this._calculateState); 
    }, 

    componentWillUnmount(){ 
     PostsStore.removeChangeListener(this._calculateState); 
    }, 

    render(){   
     const { posts } = this.state.posts; 
     return(
      <div> 
       {posts.map(post => { 
        return <h3 key={post.id}>{post.title}</h3> 
       })} 
      </div> 
     ) 
    } 
}