Skip to content

Instantly share code, notes, and snippets.

@paulsturgess

paulsturgess/redux-container-component.js

Created November 6, 2016 22:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save paulsturgess/7089b2386e8b86335fa7b681e3935c7a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save paulsturgess/7089b2386e8b86335fa7b681e3935c7a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Paul Sturgess created this gist Nov 6, 2016.
    19 changes: 19 additions & 0 deletions redux-container-component.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    import { connect } from 'react-redux';
    import AddTodoForm from '../components/AddTodoForm'
    import actions from '../actions';

    // mapDispatchToProps receives the dispatch() method and returns
    // callback props that can be used to inject into the presentational component
    // This means addTodo can be set as a prop when testing AddTodoForm which makes
    // it easy to spy and check the correct actions are triggered
    export const mapDispatchToProps = (dispatch) => ({
    addTodo: (value) => dispatch(actions.addTodo(value))
    })

    // A container component is just a React component that uses store.subscribe()
    // to read a part of the Redux state tree and supply props to a
    // presentational component it renders
    const ConnectedAddTodo = connect(null, mapDispatchToProps)(AddTodoForm)
    // In this case there are no props

    export default ConnectedAddTodo