Доступ к хранилищу Redux Redux-Form в другом компоненте? - PullRequest
Новая
       7

Доступ к хранилищу Redux Redux-Form в другом компоненте?

0 голосов
/ 01 августа 2020

У меня есть форма поиска, в которой я хотел бы получить доступ к значению ввода из другого компонента и выполнить поиск на основе значения ввода

Как мне получить доступ к этому значению в другом компоненте?

входной автономный компонент 

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

const validate = (values) => {
    const errors = {};
    if (!values.search) errors.username = 'Enter A Search';

    return errors;
};

const renderField = ({
    input,
    label,
    type,
    meta: { touched, error, warning },
}) => (
    <React.Fragment>
        <input
            className="input"
            autoFocus
            {...input}
            placeholder={label}
            type={type}
        />

        {touched &&
            ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </React.Fragment>
);

const SyncValidationForm = (props) => {
    const { handleSubmit, pristine, reset, submitting } = props;
    return (
        <div>
            <form onSubmit={handleSubmit}>
                <div className="input-container">
                    <Field
                        name="search-super"
                        type="search"
                        component={renderField}
                        label="Search"
                        autoFocus={true}
                    />
                    <button
                        className="clear-search__btn"
                        type="button"
                        disabled={pristine || submitting}
                        onClick={reset}>
                        X
                    </button>
                </div>
            </form>
        </div>
    );
};

export default reduxForm({
    form: 'superSearch', // a unique identifier for this form
    validate, // <--- validation function given to redux-form
})(SyncValidationForm);

Как я пытаюсь получить доступ к информации: 

import React, { useEffect }...

import { useDispatch, useSelector } from 'react-redux';
....

const formState = useSelector((state) => state.form);


useEffect(() => {
        console.log(formState);
    });

журнал консоли: 

Object {  }

Object { superSearch: {…} }

как только я ввожу что-то во входные журналы консоли 

{…}
​
superSearch: {…}
​​
anyTouched: true
​​
fields: Object { "search-super": {…} }
​​
registeredFields: Object { "search-super": {…} }
​​
syncErrors: Object { username: "Enter A Search" }
​​
     values: {…}
​​​
          "search-super": "dsds"

как мне получить доступ к значениям? Я пробовал console.logging много вещей, но не могу добраться до него.

...