APIの結果がバインドされていないReact-Reduxコンポーネント

Question

私はチュートリアルから簡単なアプリケーションを作成していて、動作中のAPI呼び出しでちょっとした不具合が発生しました。今度は、ブラウザでデバッグするときに返されるデータを見ることができますが、this.props.todosは常に定義されていないので、APIが確実に呼び出されます。今私の疑念は、非同期呼び出しが終了する前にレンダリングされることですが、レンダリング前にクラスを待機させるためにこの状況をどう処理するかを正確に見つけることができないようです。

ここはgithubの私のプロジェクトへのリンクです。コードやビルドに自由にご利用ください。ここでTodo Project

は、ここに私のindex.js

const store = configureStore(); 

store.dispatch(loadTodos()); 

render(
    <Provider store={store}> 
     <App /> 
    </Provider>, 
    document.getElementById('root') 
); 
registerServiceWorker(); 

である私はここで

export function loadTodosSuccess(todos) { 
    return { 
    type: types.LOAD_TODOS_SUCCESS, 
    todos 
    }; 
} 

export function loadTodos() { 
    return function(dispatch) { 
    return todoApi.getTodos().then(todos => { 

     dispatch(loadTodosSuccess(todos)); 
    }).catch(error => { 

     throw(error); 
    }); 
    }; 
} 

を呼び出すアクションの部分である私のAPIコールは、ここ

static getTodos() { 
     return fetch('http://5a0c1bfc6c25030012c335b5.mockapi.io/todos').then(response => { 

     return response.json(); 
     }).catch(error => { 

     return error; 
     }); 
    } 

そして最後にあります私のリストの構成要素です

import React, { Component, PropTypes } from 'react'; 
import Card from '../Card/Card' 
import classes from './CardList.css'; 
import { bindActionCreators } from 'redux'; 
import * as todoActions from '../../Actions/TodoActions'; 
import {connect} from 'react-redux'; 

class CardList extends Component { 
    constructor(props) { 
     super(props); 
     } 
    render() { 

     return (

      <div className={classes.cardList}> 
      { 
       this.props.todos.map((todo, index) => { 
        return <Card 
        click={() => this.deleteCard(index)} 
        key={todo.id} 
        title={todo.title} 
        summary={todo.summary} 
        dateToCompleteBy={todo.dateToCompleteBy} /> 
       }) 
      } 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps) { 

    return { 
     todos: state.todos 
    }; 
} 

function mapDispatchToProps(dispatch) { 

    return { 
     actions: bindActionCreators(todoActions, dispatch) 
    }; 
} 

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

Answer 1

あなたInitialStateはtodosを持つオブジェクトです：

{ 
    todos: [], 
} 

のでLOAD_TODOS_SUCCESSに、あなたはそれに応じて更新する必要があります

`` LOAD_TODOS_SUCCESSを聴いている

case types.LOAD_TODOS_SUCCESS: 
    return { 
    ...state, 
    todos: action.todos 
    }