2017-12-26 15 views
0

컨테이너 구성 요소에 formReducer 값을 가져 오려고했습니다.Redux 형식 : formReducer에 액세스 할 수 있습니까?

두 가지 구성 요소가 있습니다. 하나는 프레젠테이션 구성 요소이며 Redux-Form입니다.

class Form extends React.Component { 
    render() { 
     return (
     <div> 
      <form onSubmit={handleSubmit}> 
      <Field name="title" 
        component="input" 
        type="text"/> 
      </form> 
     </div> 
     ) 
    } 
} 

Form = reduxForm({ 
    form: 'PostEditor', 
    enableReinitialize: true, 
})(Form); 

Form = connect(
    state => ({ 
     initialValues: state.post.post, 
     enableReinitialize: true, 
    }), 
)(Form) 

export default Form; 

그리고 다른

내가 formReducer에 액세스 할 위치입니다 컨테이너입니다. 돌아 오는 '가게에서
class PostEditor extends React.Component { 
    render() { 
     console.log("form", this.props.PostEditor);//This results in "undefined" 
     return (<Form onSubmit={data=> this.handleSubmit(data)}/>); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     PostEditor: state.form 
    } 
} 
export default connect(mapStateToProps, null)(PostEditor); 

은, 형태 감속기는 state.form로 설정되어 있지만,이 액세스 할 수 없습니다.

감속기에서 값을 가져올 수 있습니까?

답변

1

ReduxForm 선택기 중 하나를 사용하십시오. 여기

import { getFormValues } from 'redux-form'; 

const mapStateToProps = (state) => { 
    return { 
     PostEditor: getFormValues('PostEditor')(state) 
    } 
} 

는 자세한 설명서가 있습니다 https://redux-form.com/7.2.0/docs/api/selectors.md/

+0

나는 그것을 알아 채지 못했습니다 ... 감사합니다! – Hiroki

1

이 REDUX 형태에서 양식 가져 오기의 다음 선택을 값에 액세스하려면를

import { formValueSelector } from 'redux-form'; 

는 그런 형태의 이름으로 함수를 호출 mapStateToProps의 값을 검색하려고합니다.

그러면 Redux 저장소의 상태와 값을 가져 오려는 필드의 이름으로 호출되는 함수가 반환됩니다.

const mapStateToProps = (state) => { 
    return { 
     titleFieldValue: formValueSelector('PostEditor')(state, 'title') 
    } 
} 

여러 필드를 검색하려면이 함수 호출에 더 많은 인수를 추가 할 수 있습니다. 예 :

formValueSelector('PostEditor')(state, 'title', 'name', 'otherField') 

다음 구문은 "카레"함수의 예입니다. 이것은 다른 함수를 반환하는 함수에 주어진 이름 일뿐입니다. 관심이 있으시면 this을 읽고 currying에 대한 소개를 읽어보십시오.