ComponentDidMountでの非同期API呼び出しの作成

Question

私はReactJSにアーティストオブジェクトのリストが必要です。私はReactJSのドキュメントを読んで、これが見つかりました：だから私は[OK]を、私はcomponentDidMoun()メソッド内から（私はReduxのを使用しています）私のfetchArtists()アクションをオフに解雇だろう、と思った

を。

私はそれをやっていますが、何らかの理由でそれが機能していません。私が戻ってきたアーティストのリストは、ロガーで考えてもundefinedでも、私はアーティストが返されたことがわかります。

CODE

は、ここでアプリのコンテナコンポーネントです。 mapStateToProps()メソッド内

class App extends Component { 
    componentDidMount() { 
    this.props.dispatch(ArtistsListActions.fetchArtists()); 
    } 

    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Route exact path="/" render={routeProps => <ArtistList {...routeProps} artists={this.props.artists} />} /> 
     <Route exact path="/artist/:artistUrlName" component={Artist} /> 
     </div> 
    ); 
    } 
} 

ArtistList.propTypes = { 
    artists: PropTypes.array.isRequired 
}; 

const mapStateToProps = function(state) { 
    console.log('The state is:'); 
    console.log(state); 
} 

export default connect(mapStateToProps)(App); 

console.log(state);はロードのアーティストと私の状態を表示する必要がありますが、私はそうではない、artistsは、その時点で空の配列です。

UPDATE

私はあなたのすべてが私のmapStateToProps()方法でオプションを返すについて提案し、それでも動作しないことを何をしました。私はthis screencastで起こっていることを捕まえました。

Answer 1

これは、Reduxのために失敗しました。これは、mapStateToPropsメソッドから期待される結果が得られません。これは、ComponentPropsにマージするObjectを返す必要があります。それは開発者の失敗として扱われます。したがって、Reduxはループを壊し、イベントをもう処理しないため、devに強制的に修正されます。

あなたはそれが自動的にディスパッチ中でそれをラップし、小道具の下で包まれた機能が利用できるようになります接続するために2番目のパラメータとして関数を渡す場合もthis.props.dispatch(ArtistsListActions.fetchArtists())のショートカットがある：

class App extends Component { 
    componentDidMount() { 
    this.props.fetchArtists(); 
    } 

    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Route exact path="/" render={routeProps => <ArtistList {...routeProps} artists={this.props.artists} />} /> 
     <Route exact path="/artist/:artistUrlName" component={Artist} /> 
     </div> 
    ); 
    } 
} 

ArtistList.propTypes = { 
    artists: PropTypes.array.isRequired 
}; 

const mapStateToProps = function(state) { 
    console.log('The state is:'); 
    console.log(state); 
    const artists = state.artists.artists && state.artists.artists.verified; 
    return {artists: artists || []}; 
} 

const mapDispatchToProps = { 
    fetchArtists: ArtistsListActions.fetchArtists; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(App); 

Answer 2

アクシオスコールの前にエラーがスローされています。初期状態はあなたのAPIからの応答の形とは一致しません。

あなたがAPI一致させようと、あなたのactionCreatorsを介してこれを正規化したり、inital状態を更新することができ、次のいずれか完全性については

const initialState = { 
    isFetching: false, 
    fetchComplete: false, 
    artists: {artists: {verified:[]}}, 
    error: null 
}; 

を、これはあなたの初期状態を変更する場合は、必要があるでしょうmapStateToPropsです：

const mapStateToProps = function(state) { 
    console.log(state); 
    return { 
     artists: state.artists.artists.verified 
    } 
} 

Answer 3

だから、あなたはおそらく、小道具への発送を...忘れてしまった

class App extends Component { 
    componentDidMount() { 
    this.props.fetch(); //Call just your mapped dispatch 
    } 

    render() { 
    return (
     <div className="App"> 
     <Header /> 
     <Route exact path="/" render={routeProps => <ArtistList {...routeProps}  artists={this.props.artists} />} /> 
     <Route exact path="/artist/:artistUrlName" component={Artist} /> 
     </div> 
    ); 
    } 
} 

ArtistList.propTypes = { 
    artists: PropTypes.array.isRequired 
}; 

const mapStateToProps = function(state) { 
    console.log('The state is:'); 
    console.log(state); 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     fetch:() => dispatch(ArtistsListActions.fetchArtists()) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(App); //Pass new method here