react-reduxでconnectしたのにpropsがundefinedになる

containers/App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'

import List from '../components/List';

const mapStateToProps = state => {
  return {
    todos: state.todo
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <List />
      </div>
    )
  }
}
export default connect(mapStateToProps)(App)

// 以下のようにすると、List.jsのtodosに値が渡る
// const App = connect(mapStateToProps)(List)                                                                                                                                                                         
// export default App

components/List.js

import React, { PropTypes } from 'react'

export default ({ todos }) => {
  console.log(todos); // => undefinedになってしまう
}

react-reduxを試しているのですが、上記のような挙動となります。
containerは複数のcomponentをもつものと思っているので、この挙動だとcomponentごとにcontainerを用意する必要が出てきてしまうと思っているのですが、こちらの挙動としては正しいのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

containerは複数のcomponentをもつものと思っているので、この挙動だとcomponentごとにcontainerを用意する必要が出てきてしまうと思っているのですが、こちらの挙動としては正しいのでしょうか？

正しいと思います。 component にプロパティを渡す手段として、

container 化して、 store から値を抽出する
component 間でプロパティを渡す

のいずれかを選択することになると思います。質問者様の例であれば、後者を選択して、以下のように親コンポーネントからプロパティを渡されれば良いのではないかと思います。

js
1class App extends Component {
2  render() {
3    return (
4      <div className="App">
5        <List data="{todos}"/>
6      </div>
7    )
8  }
9}

投稿2018/02/12 00:48

mit0223

総合スコア3401

connectの役割はpropsにstateの情報を自動で渡すことにして
propsを必要としない新しいコンポーネントを作ることです。
したがって

components/List.js

import { connect } from 'react-redux'

const mapStateToProps = state => {
  return {
    todos: state.todo
  }
}

const List= ({ todos }) => {
  console.log(todos); // => undefinedになってしまう
}

export default connect(mapStateToProps)(List)

import React, { Component } from 'react';

import List from '../components/List';


export default class App extends Component {
  render() {
    return (
      <div className="App">
        <List />
      </div>
    )
  }
}

と書くパターンか

どうしてもAppにconnectを渡したいならApp側にもprops.todosを持たせて下さい

投稿2018/02/12 00:37

編集2018/02/12 00:42