Как получить любое значение формы из любого места в моем приложении в redux-forms v7 - PullRequest
Новая
       8

Как получить любое значение формы из любого места в моем приложении в redux-forms v7

0 голосов
/ 10 мая 2018

Наиболее близким к этому является reduxForm().getFormState(), из которых плохо документировано

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Вы захотите использовать formValueSelector, который экспортируется из избыточной формы. В то время как вы можете погрузиться непосредственно в дерево состояний и извлечь что-то для себя, использование селектора, экспортируемого при помощи избыточной формы, означает, что вы не берете зависимость от деталей реализации избыточной формы.

Вы используете это как: 

import React from 'react';
import { formValueSelector } from 'redux-form';

class App extends React.Component {
  // ...
}

const formName = 'myForm'; // Name of form you want
const myFormValueSelector = formValueSelector(formName);

const mapStateToProps = state => ({
  name: myFormValueSelector(state, 'name') // selects the name field value
});

export default connect(mapStateToProps)(App);

Документацию по этому методу можно найти здесь

0 голосов
/ 10 мая 2018

Значения формы будут доступны в магазине приставок. Вы можете получить его из любых компонентов приложения.

Мини пример,

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import App from './src/components';

const rootReducer = combineReducers({
    form: formReducer,
});

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(reducers);

ReactDOM.render(
    <Provider store={store}>
        <App />
    <Provider>
, document.querySelector('.root'));

app.js 

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

class App extends Component {
    ...
    render() {
        console.log(this.props.forms); // This fill print information about all of your app forms
        return <div />;
    }
}

function mapStateToProps(state) {
    return {
        forms: state.form;
    }
}

export default reduxForm({ 
    form: 'someForm',
})(connect(
    mapStateToProps,
    null
)(App));

В app.js console.log будет печатать данные формы следующим образом: 

{
    someForm: {...someForm props},
    someOtherForm: {...someOtherForm props},
}
...