如何在reselect中使用redux-form
如何在reselect中使用redux-form
提问于 2018-03-06 08:03:05
我想使用reselect和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);回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-28 08:25:21
您可能希望使用redux-form的选择器(这是从redux-form中获取当前数据的方式)。
您可以在此处了解有关选择器的更多信息...
https://redux-form.com/7.3.0/docs/api/formvalueselector.md/
举个例子..。
https://redux-form.com/7.3.0/examples/selectingformvalues/
然后，您可以将Reselect选择器与Redux-form选择器一起使用，就像这样……
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)Stack Overflow用户
发布于 2021-06-29 16:18:54
您可以像这样使用getFormValues：
import { createSelector } from 'reselect';
import { getFormValues } from 'redux-form';
const selectFormValues = () => createSelector(
(state) => state,
(state) => getFormValues('formName')(state)
);Stack Overflow用户
发布于 2018-08-04 06:21:10
直到最近，试图以一种与表单无关的方式获取select state确实很糟糕。我通过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>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49121421
复制相关文章
相似问题