그래서 저장소에 값이 채워진 Redux Form을로드하려고합니다. 그러나 나는 null
이외의 것을 다시 얻을 수 없습니다. 몇 시간 동안 지금 여기에 있었고 여러 가지 일을 시도하는 여러 가지 예를 읽고 내가이 벽에 불과하다고 생각했습니다.Redux-Form 초기 값
이 Redux Form Initializing from State example
- 돌아 오는 다음 : 3.6.0
- 반작용-돌아 오는 : 5.0.3
- 돌아 오는 형태 : 6.6.3
- 반응 : 15.4.2
하위 구성 요소를 양식으로 렌더링하는 상위 구성 요소가 있습니다. 최소한의 코드를 넣고 가능한 한 일반적인 이름을 만드는 간결함을 위해서. 모든 것이 잘로드되지만 문제는 내 가게에 제대로 연결되어 있지 않은 것에 달려 있다고 생각합니다. 아니면 그냥 componentWillMount
에 데이터를로드해야합니까?
부모 구성 요소 :
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from '../actions/usersActions';
import ChildForm from './ChildForm.jsx'
@connect((store) => {
return{
user: store.users.user
}
})
export default class Parent extends Component{
componentWillMount(){
this.props.dispatch(fetchUser(this.props.match.params.id))
}
submit = (values) => {//do some stuff}
render(){
return(
<ChildForm onSubmit={this.submit} />
);
}
}
ChildForm :
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { user } from './reducers/usersReducer.js';
class ChildForm extends Component{
render(){
console.log('FORM STATE >>>>>>>>>>', this.state); //Returns NULL
const { handleSubmit } = this.props;
return(
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="firstName">First Name</label>
<Field name="first_name" component="input" type="text"/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}
ChildForm = reduxForm({
form: 'childForm',
enableReinitialize : true // I found this in another SO Example
})(ChildForm);
ChildForm = connect(
state => ({
user: state.user,
initialValues: state.user
}),
{ fetchUser }
)(ChildForm)
export default ChildForm;
usersReducer.js
012,351,export default function reducer(state={
user: {},
}, action){
switch (action.type){
case "FETCH_USER_FULFILLED":{
return{
...state,
user: action.payload
}
}
}
return state;
}
여기 현재 내가 현재 있습니다. 페이지를 만들고 양식을 작성하고 모든 작업을 제출할 수 있습니다. 그러나 나는 내 Store 값을 양식 필드로 가져 오는 방법을 알아낼 수 없습니다. 어떤 도움이라도 대단히 감사하겠습니다.