Где связать действия с реагирующим компонентом - PullRequest
Новая
       5

Где связать действия с реагирующим компонентом

0 голосов
/ 26 августа 2018

Является ли плохой практикой соединять / связывать действия (и в этом отношении состояние) с компонентом в том же файле, в котором вы определяете указанный компонент?Если да, рекомендуется ли создавать контейнерный компонент (как указано здесь )?Если это так, и я хочу развернуть реквизиты от родительского компонента к дочернему компоненту, которому нужны действия и состояние, связанное с ним, и, следовательно, контейнер, как мне это сделать?Спасибо.

1 Ответ

0 голосов
/ 26 августа 2018

Если этот упомянутый компонент является и будет единственным, использующим подключенное состояние и действия, нет, это не плохая практика. Даже если это не так, вы можете подключить несколько компонентов к вашему магазину. Но разве было бы нелегко использовать компонент контейнера и передавать необходимые части состояния и некоторых создателей ваших действий связанным дочерним компонентам? 

import React from "react";
import ReactDOM from "react-dom";
import { connect } from "react-redux";
import { anAction, anotherAction } from "./actions/";

class ContainerApp extends React.Component {
  state = {
      maybeSomeLocalState: "",
  }

  render() {
    const { aState, anAction, anotherState, anotherAction } = this.props;
    return (
      <div>
        <Child
          aState={aState}
          anAction={anAction}
        />
        <Child2
          anotherState={anotherState}
          anotherAction={anotherAction}
        /
      </div>
    );
  }
}

const mapStateToProps = state => ({
  aState: state.aState,
  anotherState: state.anotherState,
});

export default connect( mapStateToProps, { anAction, anotherAction } )(ContainerApp);

const Child = (props) => (
  <div>
    <p>{props.aState.someValue}</p>
    <button onClick={props.anAction}>Do something</button>
  </div>
);

const Child2 = (props) => (
  <div>
    <p>{props.anotherState.someValue}</p>
    <button onClick={props.anotherAction}>Do another thing</button>
  </div>
);
...