以Redux形式动态加载initialValues [英] Dynamically load initialValues in Redux Form

问题描述

使用 initializingFromState 在Redux-Form中，我试图动态设置它。这是为了编辑书籍列表中的特定书籍，并使用在express.js中设置的简单api。

Using the example of initializingFromState within Redux-Form, I am trying to set this up dynamically. This is to edit a particular book in a list of books, and is using a simple api set up in express.js.

完整的容器在下面。我不知何故需要在 mapStateToProps 函数中传入 initialValues 。在这个例子中，它是通过静态对象完成的，但我无法弄清楚如何使用我通过 fetchBook 引入的信息，并将其传递给 initialValues 。

The full container is below. I somehow need to pass in initialValues, within the mapStateToProps function. In the example, it is done via a static object, but I can't work out how to use the information I have pulled in via fetchBook, and pass it to initialValues.

容器：

import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { fetchBook, editBook } from '../actions/index';

class BookEdit extends Component {

  componentWillMount() {
      this.props.fetchBook(this.props.params.id);
  }

    static contextTypes = {
    router: PropTypes.object
    }

  onSubmit(props) {
    this.props.editBook(this.props.book.id, props)
      .then(() => {
        this.context.router.push('/');
      });
  }

    const data = {
        title: {this.props.book.title},
        description: {this.props.author}
    }

  render() {

    const { fields: { title, author }, handleSubmit } = this.props;
    const { book } = this.props;

    if (!book) {
      return (
          <div>
            <p>Loading...</p>
          </div>
      )
    }

    return (
      <div>
      <Link to="/">Back</Link>
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <h2>Add a new book</h2>

                <label>Title</label>
                <input type="text" {...title} />
                <div className="text-help">{title.touched ? title.error : ''}</div>

                <label>Author</label>
                <input type="text" {...author} />
                <div className="text-help">{author.touched ? author.error : ''}</div>

                <button type="submit">Add</button>
                <Link to="/" className="button">Go back</Link>
            </form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      book: state.books.book,
      initialValues: // how do I pass in the books here?
  };
}

export default reduxForm({
  form: 'EditBookForm',
  fields: ['title', 'author']
}, mapStateToProps, { fetchBook, editBook })(BookEdit);

谢谢。

推荐答案

您的表单值不是 state.books.book 中的表单值？我想这就是你要找的全部：

Your form values aren't what's in state.books.book? I think this is all you're looking for:

function mapStateToProps(state) {
  return {
      book: state.books.book,
      initialValues: state.books.book
  };
}

因为你真的只看这个。 props.book 要知道它是否已加载，可能会更明确地执行以下操作：

Since you're only really looking at this.props.book to know if it's loaded or not, it might be more explicit to do something like:

function mapStateToProps(state) {
  return {
      loaded: !!state.books.book,
      initialValues: state.books.book
  };
}

希望有所帮助。

这篇关于以Redux形式动态加载initialValues的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！