반응 컨테이너에있는 소품에게 행동과 상태 연결

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(), (나는 이미 저장소에 연결) 감속기를 트리거 액션이 기능 submit, 내가 연결하려는 구성 요소 에. 그런 다음 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을에 기능, 나는 성에서 통과했다. ore을 매개 변수로 사용하지만 결코 함수에서 사용하지 마십시오. 처음에 store 값을 전달한 경로가있는 상용구 응용 프로그램을 사용하고 있습니다. 위의 코드에서 사용 된 경로 구문을 주석 처리했습니다.

이제 내 질문에 다음과 같이 진화했다고 가정합니다. 로그인 구성 요소가 HomeView 구성 요소 안에 중첩되어 있으므로 저장소를 홈 경로에 전달해야합니까? 그렇다면 어떻게 위의 설명 된 exampleRoute에서와 같이 기본값 Home 경로로 전달합니까?

Answer 1

제 문제는 컨테이너 대신 구성 요소를 내 HomeView에 가져오고 있다는 것입니다.이 파일의 수정 된 코드는 다음과 같습니다 :