如何使用redux-form重新选择

问题描述 投票:4回答:2

我想使用redux-form重新选择来从redux中获取值。 问题是我不知道如何将getFormValues与reselect结合起来。 似乎我无法访问createSelector中的状态。 这样我就无法在重新选择中使用redux-form的选择器。

例如:

// How to access the state here?
const getFoo = createSelector(
  [getBar],
  (bar) => {
    // return something
  }
)

redux中的选择器的工作方式如下:

getFormValues('formName')(state);
reactjs redux redux-form reselect
2个回答
3
投票

您可能希望使用redux-form的选择器重新选择(这是您从redux-form获取当前数据的方式)。

您可以在这里了解更多关于选择器的信息

https://redux-form.com/7.3.0/docs/api/formvalueselector.md/

这里有一个例子......

https://redux-form.com/7.3.0/examples/selectingformvalues/

然后,您将使用具有Redux-form选择器的Reselect选择器,类似于此...

const selector = formValueSelector('myForm');
const mapStateToProps = createStructuredSelector({
  firstValue: (state) => selector(state, 'firstValue')
});

这是另一个从不同的Github相关主题使用的例子https://github.com/erikras/redux-form/issues/1505

const formSelector = formValueSelector('myForm')
const myFieldTitle = (state) => formSelector(state, 'title')
const doSomethingWithTitleSelector = createSelector(myFieldTitle, (title) => {
    return doSomethingWithTitle(title)
})

function doSomethingWithTitle() { ... }

const Form = reduxForm({
    form: 'myForm',
})(TheComponent)

export default connect(
    state => ({
        titleWithSomethingDone: doSomethingWithTitleSelector(state)
    })
)(Form)

0
投票

直到最近,它还是试图以与形式无关的方式获得选择状态。 我通过PRing <FormName>组件纠正了这种情况,该组件允许您获取封闭表单元素的名称,并创建了一个库redux-form-reselect以适应redux-form选择器。 例如:

// @flow

import * as React from 'react'
import {connect} from 'react-redux'
import {
  isSubmitting,
  hasSubmitSucceeded,
  hasSubmitFailed,
  getFormError,
  FormName,
} from 'redux-form'
import {createStructuredFormSelector} from 'redux-form-reselect'
import SubmitStatus from './SubmitStatus'

type Props = {
  submitting: boolean,
  submitSucceeded: boolean,
  submitFailed: boolean,
  error: ?Error,
}

export default class SubmitStatusContainer extends React.Component<Props> {
  ConnectedSubmitStatus = connect(createStructuredFormSelector({
    // createStructuredFormSelector converts all of these selectors
    // to use the form name passed as the `form` prop to
    // ConnectedSubmitStatus.
    submitting: isSubmitting,
    submitSucceeded: hasSubmitSucceeded,
    submitFailed: hasSubmitFailed,
    error: getFormError,
  }))(SubmitStatus)

  render(): ?React.Node {
    const {ConnectedSubmitStatus} = this
    return (
      <FormName>
        {({form}) => <ConnectedSubmitStatus {...this.props} form={form} />}
      </FormName>
    )
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.