title: Redux - Updating state variable on checkbox toggle (and rerendering component)
body: <p><strong>edit:</strong> For those looking for a solution, please look at my submitted solution below.</p>
  
  <pre><code>  Show:
    {" "}
    &lt;FilterLink filter="SHOW_ALL"&gt;
        All
    &lt;/FilterLink&gt;
    {", "}
    &lt;FilterLink filter="HIDE_DUPLICATES"&gt;
        Duplicates
    &lt;/FilterLink&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>I'm writing a Redux app that will update the state when a checkbox is checked. Right now I'm working on getting the store to update correctly when the checkbox is checked.</p>
  
  <p>The problem I'm encountering right now is I'm not properly dispatching the <code>toggleDuplicates</code> action from <code>containers/GlossaryControls.js</code>.</p>
  
  <p>A copy of the code can be <a href="https://bitbucket.org/DigitalMockingbird/redux-checkbox-sandbox/src" rel="nofollow noreferrer"><strong>found here</strong></a>.</p>
  
  <p>Thanks in advance for the help!</p>
  
  <p><strong>actions/actions.js</strong></p>
  
  <pre><code>const toggleDuplicates = (filter) =&gt; {
    return {
      type: "TOGGLE_DUPLICATES",
      filter
    };
  };
  
  export default toggleDuplicates;
  </code></pre>
  
  <p><strong>reducers/data.js</strong></p>
  
  <pre><code>let words = [
    {
      "id": 0,
      "english": "woof",
      "french": "le woof"
    },
    {
      "id": 1,
      "english": "woof",
      "french": "le woof"
    }];
  
  export default words;
  </code></pre>
  
  <p><strong>reducers/toggleDuplicates.js</strong></p>
  
  <pre><code>const toggleDuplicates = (state, action) =&gt; {
    switch (action.type) {
      case "TOGGLE_DUPLICATES":
        return state; // duplicate removal logic will go here
      default:
        return state;
    }
  };
  
  export default toggleDuplicates;
  </code></pre>
  
  <p><strong>reducers/index.js</strong></p>
  
  <pre><code>import {combineReducers} from "redux";
  import words from "./data.js";
  import toggleDuplicates from "./toggleDuplicates";
  
  const allReducers = combineReducers({
    words,
    toggleDuplicates
  });
  
  export default allReducers;
  </code></pre>
  
  <p><strong>containers/GlossaryControls</strong></p>
  
  <pre><code>import React from "react";
  import {connect} from "react-redux";
  import toggleDuplicates from "../actions/actions";
  
  let GlossaryControls = (props) =&gt; {
    return (
          &lt;div&gt;
            &lt;input
                type="checkbox"
                checked={this.props.toggleDuplicates}
                onChange={toggleDuplicates}
            /&gt;
            {" "}
            Hide duplicates
          &lt;/div&gt;
    );
  };
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      toggleDuplicates: ownProps.toggleDuplicates === state.toggleDuplicates
    };
  };
  
  const mapDispatchToProps = (dispatch, ownProps) =&gt; {
    return {
      onClick: () =&gt; {
        dispatch(toggleDuplicates(ownProps.toggleDuplicates))
      }
    };
  };
  
  const FilterDuplicates = connect (
      mapStateToProps,
      mapDispatchToProps
  )(GlossaryControls);
  
  export default FilterDuplicates;
  </code></pre>