React Containerの小道具へのアクションと状態の接続

Question

私はreact/reduxを学習しています。ちょうど小道具の状態を変更する単純なアプリケーションを作成しようとしていますonClick。私のプレゼンテーションコンポーネント内の州とアクションを、反応還元型のconnect()関数とmapStateToProps & mapDispatchtoProps関数を使って、小道具に接続しようとすると、エラーが発生します。私のアプリを実行すると、ブラウザコンポーネントは、私のプレゼンテーションコンポーネントで宣言した小道具が指定されていないというエラーが表示されるので、そのエラーが私のコンテナにあることを意味していると仮定しています。私はドキュメントを読んでいくつかのサンプルアプリケーションを見直しましたが、私はどこが間違っているのかはまだ分かりません。

LoginContainer.jsコード：

import { connect } from 'react-redux' 
import { submit } from '../modules/login' 
import Login from 'components/Login' 

const mapDispatchtoProps = { 
    submit 
} 

const mapStateToProps = (state) => ({ 
    submitted: state.submitted 
}) 

export default connect(mapStateToProps, mapDispatchtoProps)(Login) 

Iインポート要求される機能connect()、（I既にストアに接続されている）減速をトリガするアクションである関数submit、およびI接続するコンポーネントに。 submit小道具をreduxアクションに接続し、submitted小道具を状態に接続します。これは単にブール値として使用されます。

私の単純化されたログイン・コンポーネント・コード（念のため）：

import React from 'react' 

export const Login = (props) => (
    <div> 
    <button type="button" onClick={props.submit}>Submit</button> 
    <p>{props.submitted ? "true" : "false"}</p> 
    </div> 
) 

Login.propTypes = { 
    submit: React.PropTypes.func.isRequired, 
    submitted: React.PropTypes.bool.isRequired 
} 

export default Login 

私は減速機能とアクションが含まれている私は、参照module/loginファイルを含める必要があるなら、私に教えてください。私はエラーに関与しているように見えないので、ここには含めないことにしました。

編集： @ anoopさんのコメントに対する回答として、私はログインコンテナコードにログインコンポーネントをインポートしています。コンポーネント自体はHomeViewコンポーネントに挿入されるため、ログインコンポーネントはルート内で明示的に参照されません。これらのファイルが参照される唯一の他の場所は、レジューサーを店舗に入れるときです。

マイinjectReducerコード：

import { injectReducer } from '../../store/reducers' 

export default (store) => ({ 
    path: '', 
    getComponent (nextState, cb) { 
    require.ensure([], (require) => { 
     const Login = require('./containers/LoginContainer').default 
     const reducer = require('./modules/login').default 
     injectReducer(store, { key: 'login', reducer }) 
     cb(null, Login) 
    }, 'login') 
    } 
}) 

HomeView部品コード：

import React from 'react' 
import Login from '../../../components/Login/Login.js' 

export const HomeView =() => (
    <div> 
    <Login /> 
    </div> 
) 

export default HomeView 

簡体createRoutesファイル：

import CoreLayout from '../layouts/CoreLayout/CoreLayout' 
import NotFound from './NotFound' 
import Home from './Home' 
//import ExampleRoute from './Example' 

export const createRoutes = (store) => ({ 
    path: '/', 
    component: CoreLayout, 
    indexRoute: Home, 
    getChildRoutes (location, next) { 
    require.ensure([], (require) => { 
     next(null, [ 
     //require('./Example').default(store), 
     require('./NotFound').default 
     ]) 
    }) 
    } 
}) 

export default createRoutes 

ルーティングファイルを見た後、私はcreateRoutesであることを実現関数、私はstを渡した鉱石をパラメータとして使用したが、関数内では使用しなかった。私は最初にstore値を渡したルートを持っていた定型アプリケーションを使用しています。上のコードでは、使用されたルート構文をコメントアウトしました。

私の質問は次のように進化したと思います：ログインコンポーネントはHomeViewコンポーネント内にネストされているので、ホームルートにストアを渡す必要がありますか？もしそうなら、上記のコメントexampleRouteのように、デフォルトのHomeルートにどのように渡しますか？

Answer 1

私の問題は、私のHomeViewのコンテナの代わりにコンポーネントをインポートしていたことでした。そのファイル内の修正されたコードは次の通りです：

import React from 'react' 
import classes from './HomeView.scss' 
const Login = require('../../Login/containers/LoginContainer').default 

export const HomeView =() => (
    <div> 
    <Login /> 
    </div> 
) 

export default HomeView