如何在另一个组件中获取Redux Form数据

Question

如何从Redux表单传递数据，以便可以在App.js中访问该数据？这是我使用redux-
form编写的代码。单击提交后，数据应该从form.js传递到app.js. 并且数据应显示在页面上。

这是form.js-

const Form=({fields:{name,address}})=>(
  <form>
    <center>
    <div>
      <label>First Name</label>
      <Field type="text" component="input" placeholder="Name" name="name"/>
    </div>
    <div>
      <label>Address</label>
      <Field type="text" component="input" placeholder="Phone" name="phone" />
    </div>
    <button type="submit">Submit</button>
  </center>
  </form>
)


export default reduxForm({
  form: 'form',
  fields: ['name', 'address']
})(Form);

如何将输入的数据传递给app.js？

Answer 1

您需要做的就是getFormValues获取redux field值

因此，在App.js中，您可以拥有

import {getFormValues} from 'redux-form';

..
const App = (props) => {
      var {name, phone} = props.formStates
      console.log(name, phone);
}

function mapStateToProps(state) {
    return {
         formStates: getFormValues('form')(state) // here 'form' is the name you have given your redux form 
    }
}

export default connect(mapStateToProps)(App)