Question

我试图将此示例集成到我的应用程序中：

http://redux-form.com/6.5.0/examples/initializeFromState/

不幸的是，我似乎无法让它发挥作用。我不得不改变一些事情以使其适合我的应用程序需求，因此最值得注意的变化是，而不是将操作对象传递给connect()我传递的函数返回一个行动。另外，我将状态映射到属性的语法略有不同，但应该产生相同的结果。

最让我困惑的是，它是如何知道tag（从redux检索）的哪些属性映射到哪些表单字段？

我无法弄清楚＆＃34;什么＆＃34;将触发正在初始化的表单。是连接方法吗？

有什么建议我可以尝试让它发挥作用吗？

// edit.js

import React from 'react';
import { Field, reduxForm, initialize } from 'redux-form'
import { connect } from 'react-redux';
import { fetchTag } from '../../actions/tags-actions';
import { updateTag } from '../../actions/tags-actions';
import EditTagForm from '../../components/edit-tag-form';

class EditTag extends React.Component {

  EditTagForm = reduxForm({
    form: 'editTagForm'
  })(EditTagForm);

  handleSubmit(values) {
    const tag = {
      "name": values.tagName,
      "disambiguation": values.tagDisambiguation,
      "status": values.status || "published",
      "domain": "some_domain", // @todo hardcoded
      "type": values.tagType || "Person"
    };
    this.props.dispatch(updateTag(tag));
  }
  render() {
    return (
      <div>
        <p>{this.props.tag.name}</p>
        <EditTagForm onSubmit={this.handleSubmit.bind(this)}/>
      </div>
    );
  };
}

const mapStateToProps = state => ({
  tag: { ...state.tags.tags[0] },
  fetching: state.tags.fetching,
  fetched: state.tags.fetched,
  error: state.tags.error,
  initialValues: { ...state.tags.tags[0] }
});

// @todo fetching a hardcoded tag
export default connect(mapStateToProps, fetchTag("237171c8-bc6b-498b-abbf-99a595d6442d"))(EditTag);

// tags-actions.js

...

export function fetchTag(uuid) {
    return function(dispatch) {
      api.getTagFromUuid([uuid], {})
        .then((response) => {
          dispatch({type: "FETCH_TAGS_FULFILLED", payload: {
            tags: [response.body]
          }});
        })
        .catch((req) => {
          dispatch({type: "FETCH_TAGS_REJECTED", payload: { response: req.response }});
        });
    };
}

...

Redux表单，从状态初始化表单

0 个答案: