React-Flux Load初期状態

Question

Axisを使ったAl React FluxアプリでAjaxリクエストを作成しようとしていて、状態が設定された後にデータを取得しています。

私はルートアプリでこのコードを持っている：

InitialData.getInitialPosts(); 

それはこのようになりますAPIリクエスト：

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

export default LoadInitialData; 

：アクション/ initialData.jsで

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; 

私はこれを持っています

店舗内：

ビュー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> 
     ) 
    } 
}