Как передать реквизиты (получаемые из Redux) от одного компонента к другому (React / Redux)?

Question

Как передать реквизиты (получаемые из Redux) из WrapperComponent в InnerComponent (React / Redux)?

import React, { Component } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import InnerComponent from "./InnerComponent ";

class WrapperComponent extends Component {
  state = {
    data: []
  };

  render() {
    return (
      <div>
        <InnerComponent props={this.props} />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  data: state.data
});

export default connect(mapStateToProps)(withRouter(WrapperComponent));

После рендеринга WrapperComponent - реквизиты все еще не включены. Ни один из методов LifeCicle не можетпомогите решить.

Возможно ли это?

Answer 1

Это возможно, и это рекомендуется делать, поэтому вам не нужно каждый раз вызывать все хранилище HOC через «connect».Вызовите все соответствующие действия и редукторы в свои контейнеры и передайте их как реквизиты.

В этом случае ваше имя редуктора называется данными, вы должны называть его так (я изменил имя реквизита на данные, поэтому выВы можете позвонить props.data своему ребенку):

<InnerComponent data={this.props.data} />

Или вы можете передать все реквизиты от родителей следующим образом:

<InnerComponent {...this.props} />