0
Ich bin sehr neu in Redux-Form - und ich versuche jetzt, vorgefüllte Daten Konzepte hier zu erfassen.Redux-Form - Initialize von State Fehler und Integration in Aktionen, um die Daten zu posten?
http://redux-form.com/6.0.0-rc.1/examples/initializeFromState/
Wenn ich testen diesen Code - es bricht.
„Typeerror: kann nicht lesen Eigenschaft‚Daten‘undefinierter“
Auch die Art und Weise das Beispiel die Verbindung/Redux Teile geschrieben hat, ist anders, wie ich es in der Vergangenheit definiert haben mit andere Komponenten.
// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
form: 'initializeFromState' // a unique identifier for this form
})(InitializeFromStateForm)
// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
state => ({
initialValues: state.account.data // pull initial values from account reducer
}),
{ load: loadAccount } // bind account loading action creator
)(InitializeFromStateForm)
export default InitializeFromStateForm
-
so andere Formen habe ich arbeiten - so aussehen.
// EditUserForm.js
import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { Row, Col } from 'antd';
import renderField from '../_SharedFormComponents/renderField'
import validate from './validateEditUser'
import warn from './warnEditUser'
const EditUserForm = props => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<Row>
<Col xs={24} sm={24} md={12}>
<Field name="firstName" type="text" component={renderField} label="First Name" />
</Col>
<Col xs={24} sm={24} md={12}>
<Field name="lastName" type="text" component={renderField} label="Last Name" />
</Col>
</Row>
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
)
}
export default reduxForm({
form: 'syncValidationEditUser', // a unique identifier for this form
validate, // <--- validation function given to redux-form
warn // <--- warning function given to redux-form
})(EditUserForm)
^I dann eine Schale Elternteil haben.
//EditProfile.js
import React, { Component } from 'react'
import { withRouter, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchEditProfile } from '../../actions/editProfileAction';
import { Row, Col, Button, Tabs } from 'antd';
// components
import EditUserForm from './EditUserForm'
// this is a class because it needs state
class EditProfile extends Component {
constructor(props, context) {
super(props, context);
this.submitEditProfile = this.submitEditProfile.bind(this);
}
componentDidMount() {
// console.log('this', this)
}
submitEditProfile(data) {
this.props.fetchEditProfile(data);
}
render() {
return (
<div>
<div className="form-components light">
<Row>
<Col xs={24} sm={24} md={10}>
<p>Edit Profile</p>
</Col>
<Col xs={24} sm={24} md={24}>
<Row>
<Col xs={24} sm={24} md={24}>
<EditUserForm onSubmit={this.submitEditProfile} />
</Col>
</Row>
</Col>
</Row>
</div>
</div>
)
}
}
function mapStateToProps(state) {
return {
editProfileData: state.editProfile
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchEditProfile}, dispatch);
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditProfile))
-
so aus meinem Verständnis hier die Art und Weise sie die Verbindungs Aspekt in dieser Demo geschrieben, wie ist das?
function mapStateToProps(state) {
return {
initialValues: state.account.data
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ load: loadAccount }, dispatch);
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditProfile))
-
aber ich will noch behalten das Sammeln und Verarbeiten der Daten so ...
function mapStateToProps(state) {
return {
initialValues: state.initProfile,
editProfileData: state.editProfile
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchInitProfile, fetchEditProfile}, dispatch);
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditProfile))
und innen „compentDidMount Oder compentWillMount aufzurufen oder componentDidUpdate "? this.fetchInitProfile();
.. würde meine initProfile-Aktion so aussehen?
//InitProfile.js
import axios from 'axios';
export const FETCH_INIT_PROFILE_SUCCESS = 'FETCH_INIT_PROFILE_SUCCESS'
export const FETCH_INIT_PROFILE_FAILURE = 'FETCH_INIT_PROFILE_FAILURE'
export function initProfileSuccess(response) {
return {
type: FETCH_INIT_PROFILE_SUCCESS,
payload: response
}
}
export function initProfileFail(response) {
return {
type: FETCH_INIT_PROFILE_FAILURE,
payload: response
}
}
export function fetchInitProfile(data) {
let url = 'https://api.github.com/users/theoldcounty';
return function (dispatch) {
axios.get(url)
.then(function (response) {
//console.log(response);
dispatch(initProfileSuccess(response));
})
.catch(function (error) {
//console.log(error);
dispatch(initProfileFail(error));
});
}
}
gute Beispiele, die ich gefunden habe - https://davidkpiano.github.io/react-redux-form/docs/recipes/redux-form.html –