How to connect redux to a none default component

Question

I have a file with multi component that I want to export and connect all to redux, how can I do this?

Connect wrapper need to export default, but I have multi component.

Answer 1

You don't have to export default to use connect. You can connect multiple components within the same file, with or without exporting them. Although I would recommend only placing 1 component per file

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