Как подключить приставку к компоненту по умолчанию

Question

У меня есть файл с многокомпонентным компонентом, который я хочу экспортировать и подключить все к redux, как я могу это сделать?

Обертке Connect необходимо экспортировать по умолчанию, но у меня есть многокомпонентный.

Answer 1

Вам не нужно экспортировать по умолчанию для использования подключения. Вы можете подключить несколько компонентов в одном файле с их экспортом или без него. Хотя я бы порекомендовал размещать только 1 компонент на файл

import React from 'react'
import { connect } from 'react-redux'

// This also works without the export statement
export const Comp1 = connect(
    state => ({
        someProp: state,
    })
)(({ someProp }) => (
    <div>
        <h1>Comp 1</h1>
        <p></p>
    </div>
))

const Comp2 = connect(
    state => ({
        someProp: state,
    })
)(({ someProp }) => (
    <div>
        <h1>Comp 2</h1>
        <p></p>
    </div>
))

export default Comp2

Answer 2

redux не обеспечивает экспорт по умолчанию.всегда вы подключаетесь к Redx, используя react-redux, когда вам нужно.Если вы хотите, чтобы часть dispatch или state передавалась вашему дочернему компоненту через родительский компонент, подключите redux к родительскому компоненту, а затем destructure props к дочернему компоненту.тогда все dispatch и state доступны для родительского и дочернего компонента.

import React from 'react'
import { connect } from 'react-redux'
import Component1 from './component1'
import Component2 from './component2'
import { sampleDispathFunction } from './actions'

const WrapperComponent = (props) => {

  return <div>
    <Component1 {...props} />
    <Component2 {...props} />
  </div>
}

const mapStateToProps = (state) => ({
  data: state.data,
  customer: state.customer
});
const mapDispatchToProps = (dispatch) => ({
  sampleDispathFunction: (data) => dispatch(sampleDispathFunction(data))
});
export default connect(mapStateToProps, mapDispatchToProps)(WrapperComponent);