在 redux-form 中异步声明 initialValues 的 API 是什么？答案

【问题标题】：What's the API for declaring initialValues asyncronously in redux-form?在 redux-form 中异步声明 initialValues 的 API 是什么？
【发布时间】：2017-06-02 04:29:30
【问题描述】：

考虑使用this example 版本5.3.2：

@reduxForm({
   form: 'contact',
 }, (state, ownProps) => ({ // check the current component's props
   initialValues: ownProps.data.loading 
     ? '' // nothing if still loading
     : ownProps.data.allPeople.people[0].name, // data if done fetching
 }))

The documented demo code for version >6 不显示此函数回调模式的可能性：

// 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)

第一种模式仍然可能吗？如果是这样，它是如何工作的？它在任何地方都有记录吗？我在我的组件道具中看到了I'm given an initialize dispatcher。是这样吗？

【问题讨论】：

标签： redux-form react-apollo apollo-client

【解决方案1】：

我会给你一个 apollo 具体的答案，虽然你的问题中根本没有提到 apollo，只是在标签中。看起来你是故意的。

当你用 apollo 包装你的组件时，将 prop 名称重新映射到 initialValues 下，这样 redux-form 就可以取到它，例如：

import MyComponent from './MyComponent'
import { gql, graphql } from 'react-apollo'

const currentUser = gql`
  query viewer {
    viewer {
      firstName
      lastName
    }
  }
`

export default graphql(currentUser, {
  props: ({ ownProps, data: { loading, viewer } }) => ({
    loading,
    initialValues: {
      firstName: viewer && viewer.firstName,
      lastName: viewer && viewer.lastName,
    },
  })
)(MyComponent)

【讨论】：