Question

我是react-redux世界的新手，如果我遗漏了某些内容，请纠正我：

基本上我试图通过redux store访问主机名并在表单中使用它。到目前为止，我只是在redux表单中使用主机名引用window.location，但我想通过redux store /通过任何其他更好的方法访问主机名，这样我可以保持函数纯净吗？想法？

由于

编辑：

import React from 'react'
import { Field, reduxForm } from 'redux-form'

const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
// goal is to prevent this here and do it via redux store or 
// any other options
// so I can avoid external calls inside pure function
const hostName = window.location.hostname;

return (
<form onSubmit={handleSubmit}>
  <div>
    <label>First Name</label>
    <div>
      <Field name="firstName" component="input" type="text" placeholder="First Name"/>
    </div>
  </div>
</form>
 )
 }

export default reduxForm({
 form: 'simple'  // a unique identifier for this form
})(SimpleForm)

问题：

如何将窗口对象存储在redux存储中，是否可以通过redux store以redux格式访问它们，或者可以通过任何机会对路由器提供帮助？

Answer 1

您应该将表单连接到Redux状态。

import { connect } from 'react-redux'

export default reduxForm({
 form: 'simple'  // a unique identifier for this form
})(connect(mapStateToProps)(SimpleForm)

然后：

const mapStateToProps = state => {
  return {
    hostName: state.reducerName.hostName
  }
}

所以你可以通过this.props.hostName访问它，考虑到先前在reducer中设置了hostName。

如果您使用React Router，则可以通过道具访问history对象，道具也具有位置属性。

Answer 2

前面提到的答案现在对我来说很遗憾，

这对我有用，reference to react-redux doc

import { connect } from 'react-redux';

const mapStateToProps = state => {
  return {
    form: state.form
  }
}

ClassName= connect(
   mapStateToProps,
   mapDispatchToProps
)(ClassName);

export default reduxForm({
  form: 'ObjectRepo',
  validate: validateObjects
})(ClassName);

即时通讯的'验证'是我的validation.js，因为我使用同步验证（如果你有任何，它是完全可选的）

'form'是我在reducer中使用的状态名称。我的减速机代码，

const allReducers = combineReducers({
  form: reduxFormReducer
});

如何在redux表单

2 个答案: