Redux-Form 初始值答案

【问题标题】：Redux-Form Initial valuesRedux-Form 初始值
【发布时间】：2017-10-24 02:04:00
【问题描述】：

所以我正在尝试加载一个预先填充了我商店中的值的 Redux 表单。但是，除了null 之外，我无法取回任何东西。已经在这工作了几个小时，并且一直在阅读几个尝试不同事物的 SO 示例，并认为我只是在这方面遇到了困难。

关注这个Redux Form Initializing from State example

Redux：3.6.0
React-Redux：5.0.3
Redux-Form：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} />
    );
  }
}

子窗体：

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;

enableReinitialize SO

usersReducer.js

export default function reducer(state={
  user: {},
}, action){
  switch (action.type){
    case "FETCH_USER_FULFILLED":{
      return{
        ...state,
        user: action.payload
      }
    }
  }
  return state;
}

这就是我目前所处的位置。可以获取页面、表单和提交所有工作。但是，我似乎无法弄清楚如何将我的 Store 值取出并放入表单字段中。任何帮助将不胜感激。

【问题讨论】：

标签： reactjs redux react-redux redux-form

【解决方案1】：

看起来一切都已正确连接，但我没有在商店中拉入正确的对象。

ChildForm = connect(
  state => ({
    initialValues: state.users.user
  }),
  { fetchUser }
)(ChildForm)

...总是有点小事

【讨论】：