[英]How to use redux-form with reselect
I want to use the reselect with redux-form to get the value from redux.我想使用 redux-form 的 reselect 从 redux 获取值。 the problem is I don't know how to combine the getFormValues with reselect.
问题是我不知道如何将 getFormValues 与重新选择结合起来。 it seems that I cannot access the state in the createSelector.
似乎我无法访问 createSelector 中的状态。 so that I cannot come up a way to use the redux-form's selector in the reselect.
所以我无法想出一种在重新选择中使用 redux-form 的选择器的方法。
For example:例如:
// How to access the state here?
const getFoo = createSelector(
[getBar],
(bar) => {
// return something
}
)
The selector in redux works like this: redux 中的选择器是这样工作的:
getFormValues('formName')(state);
You likely want to use reselect with redux-form's selectors (which are how you get current data out of redux-form). 您可能希望使用redux-form的选择器重新选择(这是您从redux-form获取当前数据的方式)。
You can learn more about selectors here.... 您可以在这里了解更多关于选择器的信息
https://redux-form.com/7.3.0/docs/api/formvalueselector.md/ https://redux-form.com/7.3.0/docs/api/formvalueselector.md/
with an example here... 这里有一个例子......
https://redux-form.com/7.3.0/examples/selectingformvalues/ https://redux-form.com/7.3.0/examples/selectingformvalues/
You would then use a Reselect selector with a Redux-form selector sort of like this... 然后,您将使用具有Redux-form选择器的Reselect选择器,类似于此...
const selector = formValueSelector('myForm');
const mapStateToProps = createStructuredSelector({
firstValue: (state) => selector(state, 'firstValue')
});
Here is another example of one being used from a different Github related subject https://github.com/erikras/redux-form/issues/1505 这是另一个从不同的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)
You can make use of getFormValues like so:您可以像这样使用 getFormValues:
import { createSelector } from 'reselect';
import { getFormValues } from 'redux-form';
const selectFormValues = () => createSelector(
(state) => state,
(state) => getFormValues('formName')(state)
);
Until recently, it really sucked trying to get select state in a form-independent way. 直到最近,它还是试图以与形式无关的方式获得选择状态。 I rectified this situation by PRing a
<FormName>
component that allows you to get the name of the enclosing form element, and created a library redux-form-reselect
for adapting the redux-form selectors. 我通过PRing
<FormName>
组件纠正了这种情况,该组件允许您获取封闭表单元素的名称,并创建了一个库redux-form-reselect
以适应redux-form选择器。 For example: 例如:
// @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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.