Reducerでstateの更新ができたのに描画処理がされない

Question

Reduxで、初回の描画はうまくいくのですが、
その後ユーザのアクションによるstateの更新➞描画上手く行きません。
Reducerのconsole.logにはstateの更新が確認できるのですが・・。

actionCreatorでイベントを受け付け、
そこからReducerでstoreの更新をすることで、
Reducerから発行されているstateを使用しているd
Componentが再レンダリングされる認識なんですが間違っていますか(^_^;)？？

/** container **/
import React from 'react'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'
import * as Actions from '../actionCreators/todoActions'
import todoApp from '../components/todoApp/TodoApp'
function mapStateToProps(state) {
    console.log(state) // 更新出来ている
    return state.todoApp
}
function mapDispatchToProps(dispatch) {
    return {
        actions:bindActionCreators(Actions, dispatch)
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(todoApp)

/** Reducer **/
const initialState = {
    todos: [
        {
            id: 1,
            title: "Default Title",
            description: "Default Description",
            status: 0 // 0:未実施 1:実施中 2:完了
        }
    ]
}

export default function todoApp(state = initialState, action) {
    switch (action.type) {
        case 'ADD_TODO': 
            var array = state.todos
            array.push({
                id: action.id,
                title: action.title,
                description: action.description,
                status:0
            })
            return Object.assign({}, state, {
                todos: array
            })
       case ....
    }
}

Answer 1

mapStateToPropsでの戻り値が正しくないからだと思われます。

mapStateToPropsではRecatコンポーネントにプロパティとして渡すObjectを返す必要があります。

function mapStateToProps(state) {
  return {
    hoge: 1,
    fuga: "abc"
  };
}

とした場合、Reactコンポーネント側で

class Hoge extends React.Component {
  render() {
    return (
      <ul>
         <li>{this.props.hoge}</li>
         <li>{this.props.fuga}</li>
      </ul>
    );
  }
}

とすると

<ul>
  <li>1</li>
  <li>abc</li>
</ul>

という形になります。

質問のコードではreturn state.todoAppとしていますが、そもそもstateにtodoAppのキーが無いため、undefinedが返るだけでプロパティには何も返りません。stateがそのまま渡してthis.props.todosとして受け取りのであれば、return state;とすればいいでしょう。その他のプロパティ名で受け取りたいのであれば、Objectを作る形で渡すようにしてください。