Передача реактивно-редукционных параметров в одноуровневый компонент

Question

У меня есть компонент макета, в котором содержится каждый основной вид. Вид макета имеет дочерний компонент, который принимает параметр, функцию обратного вызова:

const Layout = props => (
  <React.Fragment>
    <Header onBack={props.onBack} />
    {props.children}
  </React.Fragment>
)

и образец основного вида:

const Profile = props => (
  <Layout onBack={ this.onBack } >
    <div>page contents</div>
  </Layout>
)

Мне не нравится передавать параметр родителю просто для того, чтобы передать его другому дочернему элементу, он кажется сложным и IMO antipattern. Я установил хранилище избыточности с соответствующими редукторами ... но имеет ли смысл вызывать действие, например, setOnBack (myBackHandler), чтобы обновить состояние хранилища, а в компоненте Header он просто читает состояние хранилища? Как работает тест-редукс в его хранилище, когда он принимает разность для определения изменения состояния?

Answer 1

Что бы я предложил, это отделить реализацию этих обработчиков от вашего презентационного компонента в другой файл с именем HeaderContainer.js. Вместо использования компонента <Header/> непосредственно в компоненте <Layout/> теперь можно использовать компонент <HeaderContainer/>.

Layout.js

import HeaderContainer from './HeaderContainer';

const Layout = (props) => (
  <React.Fragment>
    <HeaderContainer/>
    {props.children}
  </React.Fragment>
)

HeaderContainer.js

import { connect } from 'react-redux';
import Header from './Header.js'

const mapDispatchToProps = dispatch => ({
  onBack: () => dispatch({ type: 'BACK_BUTTON_CLICKED' })
}) 

export default connect(null, mapDispatchToProps)(Header);

Обработчик onBack теперь предоставляется как опора для презентационного компонента. Обратите внимание, что вы также можете использовать библиотеку, например, «Восстановить», если вы хотите использовать локальное состояние, или использовать новый API React-хуков (с осторожностью). Это все еще очень новый и не готовый к производству.