Skip to content

Instantly share code, notes, and snippets.

@jakub-g

jakub-g/intro.md

Last active Mar 11, 2021
Embed
What would you like to do?
preact-redux: where can `props` come from
import { compose } from 'redux'
import { connect } from 'react-redux'

compose

compose(func1, func2, func3, func4) === func1(func2(func3(func4))))

connect

https://react-redux.js.org/api/connect#connect-returns

/* @type {Function} HOC */
const connectUser = connect(
  mapState,
  mapDispatch
)

const ConnectedUserLogin = connectUser(Login)
import { Component } from 'preact'
import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'
import { prop1 } from 'feature/feature.selectors.js'
import { prop2 } from 'feature/feature.actions.js'
const mapStateToProps = createStructuredSelector({ prop1 })
const mapDispatchToProps = { prop2 }
class Feature extends Component {
componentDidMount() {
const props = this.props
props.prop2(props)
}
componentDidUpdate(prevProps) {
const { props } = this
if (prevProps.prop1 !== props.prop1) {
props.prop2(props)
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Feature) // <----------

Parent.jsx

    return <Feature {...props} prop3="whatever" />     // <----------

Feature.jsx

...
const Feature = (props) => {
  return (
     <div>${props.prop3}</div>
  )
}  
...
export default connect(mapStateToProps, mapDispatchToProps)(Feature)

HocFoo.jsx

export const foo = (WrappedComponent) => {
  const mapStateToProps = () => ({})
  class HOCFoo extends Component {
    render(props) {
      return (
        <WrappedComponent {...props} prop3="whatever" /> // <----------
      )
    } 
  }
  return connect(mapStateToProps)(HOCFoo)
}

Feature.jsx

import { foo } from 'HocFoo.jsx'                        // <----------
...
const Feature = (props) => {
  return (
     <div>${props.prop3}</div>
  )
}  
...
export default compose(                                 // <----------
  connect(mapStateToProps, mapDispatchToProps),
  foo                                                   // <----------
)(Feature)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment