Skip to content

Instantly share code, notes, and snippets.

@MaxMEllon

MaxMEllon/index.js

Last active December 29, 2017 07:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MaxMEllon/31652df15d90f2ac7bb4fea48a221295 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MaxMEllon/31652df15d90f2ac7bb4fea48a221295 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MaxMEllon revised this gist Dec 29, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    import { render } from 'react-dom'
    import React, { Component } from 'react'
    import React from 'react'
    import PropTypes from 'prop-types'

    /**
    @@ -22,7 +22,7 @@ import PropTypes from 'prop-types'
    *
    */
    function simpleConnect(Component) {
    return class extends Component {
    return class extends React.Component {
    static contextTypes = {
    store: PropTypes.any,
    }
  2. MaxMEllon revised this gist Dec 22, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -46,6 +46,7 @@ function simpleConnect(Component) {
    }

    render() {
    const newProps = this.context.store.getState()
    return (
    <Component {...this.props} {...newProps} />
    )
  3. MaxMEllon revised this gist Dec 22, 2017. 1 changed file with 32 additions and 10 deletions.
    42 changes: 32 additions & 10 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,26 +1,48 @@
    import { render } from 'react-dom'
    import React, { Component } from 'react'
    import PropTypes from 'prop-types'

    function createHOC(Component) {
    /**
    * @example
    *
    * function App(props) {
    * return (
    * ...
    * )
    * }
    *
    * // connect されているので， props が store の state になる
    * // 従来は，subscribeやaddEventListener で handle したイベントのコールバックで
    * // setState しており，Component が状態を持っていた．
    * // コンポーネントは，なるべく不変にしたいので，stateではなくpropsで扱いたい．
    * // component 内 で state を書き換えると，誤ってstoreを直接書き換える可能性がある
    * // Object.assign などで対策することもできる
    * // ただ，これらのことを毎度考えるのは大変なので，HoCを使って state を propsに流し込む
    * export default simpleConnect(<App />)
    *
    */
    function simpleConnect(Component) {
    return class extends Component {
    constructor(props) {
    super(props)
    this.state = {
    name: ''
    }
    static contextTypes = {
    store: PropTypes.any,
    }

    constructor(props, context) {
    super(props, context)
    this.state = { }
    }

    componentDidMount() {
    this.unsubscribe = store.subscribe(this.onChange.bind(this))
    this.unsubscribe = this.context.store.subscribe(this.onChange.bind(this))
    }

    componentWillUnmount() {
    this.unsubscribe()
    }

    onChange(e) {
    const { name } = store.getState()
    this.setState({ name })
    const state = this.context.store.getState()
    this.setState({ state })
    }

    render() {
    @@ -29,4 +51,4 @@ function createHOC(Component) {
    )
    }
    }
    }
    }
  4. MaxMEllon created this gist Dec 22, 2017.
    32 changes: 32 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    import { render } from 'react-dom'
    import React, { Component } from 'react'

    function createHOC(Component) {
    return class extends Component {
    constructor(props) {
    super(props)
    this.state = {
    name: ''
    }
    }

    componentDidMount() {
    this.unsubscribe = store.subscribe(this.onChange.bind(this))
    }

    componentWillUnmount() {
    this.unsubscribe()
    }

    onChange(e) {
    const { name } = store.getState()
    this.setState({ name })
    }

    render() {
    return (
    <Component {...this.props} {...newProps} />
    )
    }
    }
    }