Реагируйте на обмен значений чтения в редукционной форме с другого компонента в режиме реального времени. - PullRequest
Новая
       1

Реагируйте на обмен значений чтения в редукционной форме с другого компонента в режиме реального времени.

1 голос
/ 11 марта 2019

Вот код https://codesandbox.io/s/7073llkj

В простом примере используется redux-form-website-template для отображения значения, я очень новичок в реагировании и в форме редукса, я даже не знаю, что это такое, я просто хочу прочитать значение очень просто в других компонентах. 

import React, { Component } from "react";

class ComponentOne extends Component {
  render() {
    return (
      <div>
        <div>CompoenntOne: I wannna read the props.values.firstName here</div>
        <div>CompoenntOne: I wannna read the props.values.lastName here</div>
      </div>
    );
  }
}

export default ComponentOne;

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

1 Ответ

1 голос
/ 11 марта 2019

Каждый раз, когда значение поля SimpleForm изменяется, обновленное значение сохраняется в хранилище Redux.

Чтобы получить значения формы:

  1. Первое, что вам нужно сделать, это подключить ComponentOne к хранилищу Redux, чтобы иметь доступ к состоянию формы.
  2. Во-вторых, вы можете запросить Store и получить значения SimpleForm.

Нечто подобное: 

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getFormValues } from 'redux-form'


class ComponentOne extends Component {
  render() {
    const { values } = this.props

    return (
      <div>
        <div>CompoenntOne: I wannna read the values.firstName here</div>
        <div>CompoenntOne: I wannna read the values.lastName here</div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  // 2. Secondly, you can query the Store and get the `SimpleForm`'s field value.
  values: getFormValues('simple')(state) || {}
})

// 1. First thing you have to do is to connect `ComponentOne` with the Redux's Store,
// in order to have access to the Form's state, because it's kept in the Store.
export default connect(mapStateToProps)(ComponentOne)
...