Question

我的应用中有很多表单。我在其父减速器下为它们创建了一个单一的表单缩减器并将它们组合在一起。为了获取他们的数据，我正在使用getFormState，在获取表单状态方面一切正常，但在redux状态中，活动形式在所有redux-form reducer中重复！每个redux-form动作都适用于所有表单。

我不知道如何与您分享我可以呈现整个情况的所有代码。但我尝试在这里分享一些代码：

这是我的注册表格：

SigninForm = reduxForm({
  form: 'signin',
  validate,
  getFormState: ({ auth }) => auth.signin.form
})(SigninForm)

注册减速机

import { combineReducers } from 'redux'
import { reducer as reduxFormReducer } from 'redux-form'

const signin = combineReducers({
  error,
  isLogging,
  form: reduxFormReducer
})

export default signin

和过滤器形式：

export default compose(
  connect(null, { ...actions }),
  reduxForm({
    form: 'filters',
    destroyOnUnmount: false,
    initialValues: {
      pool: 'either',
      open_house: false,
      listing_statuses: {
        ...activeStatuses
      },
      property_subtypes,
      minimum_sold_date: '3', // unit is month but it need to timestamp
      minimum_bedrooms: 'any',
      minimum_bathrooms: 'any',
      minimum_parking_spaces: 'any'
    },
    getFormState: ({ search }) => search.filters.form
  }),
  withHandlers({
    onSubmitHandler: ({ submitFiltersForm }) => values => {
      submitFiltersForm(values)
    }
  })
)(Filters)

和我的root reducer：

const appReducer = combineReducers({
  socket,
  user,
  auth,
  brand,
  search,
  routing: routerReducer,
  listing: createNamedWrapperReducer(listing, 'LISTING')
})

export default (state, action) => appReducer(state, action)

P.S：当我在我的根减速器中使用单个表单减速器时，没有使用getFormState一切正常。

OS: Mac, node: 8.3.0, react: 15.4.2, redux: 3.6.0, redux-form: 7.0.0, browser: 60.0.3112.101 (Official Build) (64-bit)

Answer 1

根据我的理解，你没有正确使用redux-form（如果我错了，请纠正我。）

来自getting started：

表格缩减

它适用于所有表单组件，因此您只需传递它   一次。

Redux-form假设在整个应用程序的状态中只有一个redux-form reducer 。换句话说，表单缩减器不应嵌套。

删除此

const signin = combineReducers({
  error,
  isLogging,
  form: reduxFormReducer // <-- delete this line
})

并附加此

import { reducer as reduxFormReducer } from 'redux-form'
...
const appReducer = combineReducers({
  socket,
  user,
  auth,
  brand,
  search,
  routing: routerReducer,
  listing: createNamedWrapperReducer(listing, 'LISTING'),
  form: reduxFormReducer // <-- that's all there is to it
})

export default (state, action) => appReducer(state, action)

然后在你的组件中

SigninForm = reduxForm({
  form: 'signin',
  validate,
  getFormState: ({ form }) => form // <-- you don't need to use this line now
})(SigninForm)

来自docs：

getFormState：函数[可选]

一个获取整个Redux状态并返回状态的函数   对应于安装还原型还原剂的切片。   很少需要此功能，默认为假设   reducer安装在表格键下。

由于我们已将formReducer挂载在表单键下，因此根本不需要getFormState。

Answer 2

这更像是一个Redux问题。

请参阅Redux中的所有 reducer接收所有操作。
这是一个架构决策，可以很容易地对奇怪的商业创意做出反应。

因此，如果您在代码库周围复制了redux-form reducer，那么您还要复制所有表单的状态，因为操作类型相同每个表单。

getFormState选项并不适用于减速器的多个实例;它意味着将redux-form状态放在其他位置，以防根级form密钥无法使用。

因此，解决方案是按照您在问题中所说的做，并在整个应用程序中使用单个表单缩减器。

redux-form getFormState副作用

2 个答案: