как получить метод доступа dispatch () в компонент класса - PullRequest
Новая
       30

как получить метод доступа dispatch () в компонент класса

0 голосов
/ 28 января 2020

Добрый день! Я начал иметь дело с react-redux и застрял в одной точке. Я не знаю, как получить доступ к методу dispatch внутри самого компонента. Дело в том, что я пытаюсь получить данные из полей формы. В методе mapDispatchToProps я не могу получить refs. Как это правильно сделать, скажите, пожалуйста?

Например: index. js

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import store from './store'

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

Код, набранный здесь, может быть напечатан в синтаксисе ... Приложение. js

// imports ...
class App extends React.Component {
  constructor(props) {
    super(props);
    this.title = React.createRef();
    this.message = React.createRef();
  }

  // Idea 1
  onSubmitHandler_1 = e => {
    e.preventDefault();
    // how get store.dispatch({type:"UPDATE", this.title.current.value, this.message.current.value});
  };

  render() {
    return (
      <form onSubmit={this.props.onSubmitHandler_1 OR this.onSubmitHandler_2}>
        <input type="text" ref={this.title} name="title" />
        <input type="password" ref={this.message} name="password" />
        <button>Send</button>
      </form>
    );
  }
}

const mapDispatchToProps = (state, ownProps) => {
  return {};
};

// Idea 1;
const mapDispacthTOProps = (dispatch, ownProps) => {
  return {
    onSubmitHandler_2: e => {
      e.preventDefault();
      // oh... no!!! bad idea...
      // let inputTitle = e.target.querySelector('[name="title"]');
      // let inputTitle = e.target.querySelector('[name="password"]')
      dispatch({ type: "UPDATE" }); //... ???? refs
      // how get access to fields or refs??
    }
  };
};

export default connect(mapDispatchToProps, mapDispacthTOProps)(App);

1 Ответ

1 голос
/ 28 января 2020

Если вы не используете mapDispatchToProps, вы ничего не должны передавать функции connect. Таким образом, функция dispatch предоставляется в качестве опоры для вашего компонента.

Итак, если вы экспортируете свой компонент как 

// First one is 'mapStateToProps', not 'mapDispatchToProps' like in your code
export default connect(mapStateToProps)(App)

Вы можете использовать this.props.dispatch в своем обработчике отправки. Итак, что-то вроде 

onSubmitHandler = (event) => {
  this.props.dispatch({ type: "SOME_ACTION", foo: "bar" })
}

Также, вероятно, проще / лучше использовать создателей действий. 

// In some actions.js file or something
export const updateSomething = (data) => {
  return {
    type: "UPDATE",
    payload: data,
    // OR map specific attributes from the data object
  }
}

// In your component
import { updateSomething } from './actions.js'

class App extends React.Component {
  // .. all other code .. 

  submitHandler = (event) => {
    // These values would probably also be better in state variables
    const data = {
      title: this.title.current.value,
      message: this.message.current.value
    }
    this.props.updateSomething(data)
  }
}

const mapDispatchToProps = {
  updateSomething,
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

Если вы хотите отобразить пару функций и также используют функцию отправки в вашем компоненте, вы можете сделать это следующим образом: https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining -the-mapdispatchtoprops-function-with-bindactioncreators

...