如何将 redux 连接到 none 默认组件

Question

我有一个包含多个组件的文件，我想将其导出并连接到 redux，我该怎么做？

Connect wrapper 需要默认导出，但我有多个组件。

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 不提供任何默认导出。总是在需要时使用 react-redux 连接到 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);

如何将 redux 连接到 none 默认组件

How to connect redux to a none default component

reactjs

redux

react-redux

high-order-component