render（）メソッドは、小道具の更新の後に正しく呼び出されません

Question

私は目標と呼ばれる減速機とGoalsContainerというコンテナを持っている非常に簡単なreact + reduxアプリケーションをやっています。アプリのコンテナから

私はこれがゴールアクションからloadGoals呼び出す

dispatch(loadGoals(currentDate)); 

ローカルDB（のIndexedDB）から当初の目標負荷のための行動目標を呼び出す：

export function loadGoals(currentDate = new Date()){ 
    return dispatch => { 
    var goals = getGoalsFromDB(normalizeDate(currentDate)); // with this I get an array from the db 
    dispatch(setLoadGoals(goals)); 
    } 
} 

function setLoadGoals(goals) { 
    return { 
    type: types.LOAD_GOALS, 
    goals 
    }; 
} 

をそして中私の減速機私はこれを持っている：

export default function goals(state = [], action) { 
    switch(action.type) { 
    case types.LOAD_GOALS: 
     return action.goals; // here I set the state of the goal reducer with the array passed via action 
    default: 
     console.log('Im here'); 
     return state; 
    } 
} 

これは私のGoalsContainerです）問題は、それがない時にチェックすると0の目標が存在する場合、それはのような（失敗したということです

class GoalsContainer extends React.Component { 
    render() { 
    if (this.props.goals != undefined) { 
     console.log('ok called the render'); // in chrome console shows it 
     console.log(this.props.goals); // in chrome console shows correctly the goals loaded 
     console.log(this.props.goals.length); // it say 2 
     if (this.props.goals.length > 0) { // here fails... 
     console.log('good'); 
     console.log(this.props.goals); 
     var goalsView = <div>There are goals</div> 
     } 
     else { 
     console.log('why go here?'); // go here 
     console.log(this.props.goals); 
     var goalsView = <div>No goals</div> 
     } 
    } else { 
     var goalsView = <div>Undefined</div> 
    } 
    return (
     <div id="goals-main"> 
     {goalsView} 
     </div> 
    ); 
    } 
} 

GoalsContainer.propTypes = propTypes; 

function mapStateToProps(state) { 
    const { goals, environment } = state; 
    const { currentDate } = environment; 

    return { 
    goals, 
    currentDate 
    } 
} 

export default connect(mapStateToProps)(GoalsContainer); 

が、クロムコンソールショーで正しく目標アレー... その後、私は強制する場合：）コードでrender（）の回避策があれば、すべて正常に動作します。

どうしたのですか？

Answer 1

https://github.com/gaearon/redux-thunkを使用しているかどうかは言及していません。レデューサーが関数を返すようにするには、間違いなくそれをインストールする必要があります。

Answer 2

ランダムな要点からコードのすべての部分を追跡するのは難しいです。 GoalsContainerを変更するとどうなりますか。

class GoalsContainer extends React.Component { 
    render() { 
    console.log(this.props.goals); 
    return (
     <div id="goals-main"> 
     {(this.props.goals.length >= 1)?<div>There are goals</div>:<div>Nope!</div>} 
     </div> 
    ); 
    } 
} 

コンソールには何が記録されますか？