Redux - Updating state variable on checkbox toggle (and rerendering component)

Question

edit: For those looking for a solution, please look at my submitted solution below.

  Show:
  {" "}
  <FilterLink filter="SHOW_ALL">
      All
  </FilterLink>
  {", "}
  <FilterLink filter="HIDE_DUPLICATES">
      Duplicates
  </FilterLink>
</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.

The problem I'm encountering right now is I'm not properly dispatching the toggleDuplicates action from containers/GlossaryControls.js.

A copy of the code can be found here.

Thanks in advance for the help!

actions/actions.js

const toggleDuplicates = (filter) => {
  return {
    type: "TOGGLE_DUPLICATES",
    filter
  };
};

export default toggleDuplicates;

reducers/data.js

let words = [
  {
    "id": 0,
    "english": "woof",
    "french": "le woof"
  },
  {
    "id": 1,
    "english": "woof",
    "french": "le woof"
  }];

export default words;

reducers/toggleDuplicates.js

const toggleDuplicates = (state, action) => {
  switch (action.type) {
    case "TOGGLE_DUPLICATES":
      return state; // duplicate removal logic will go here
    default:
      return state;
  }
};

export default toggleDuplicates;

reducers/index.js

import {combineReducers} from "redux";
import words from "./data.js";
import toggleDuplicates from "./toggleDuplicates";

const allReducers = combineReducers({
  words,
  toggleDuplicates
});

export default allReducers;

containers/GlossaryControls

import React from "react";
import {connect} from "react-redux";
import toggleDuplicates from "../actions/actions";

let GlossaryControls = (props) => {
  return (
        <div>
          <input
              type="checkbox"
              checked={this.props.toggleDuplicates}
              onChange={toggleDuplicates}
          />
          {" "}
          Hide duplicates
        </div>
  );
};

const mapStateToProps = (state, ownProps) => {
  return {
    toggleDuplicates: ownProps.toggleDuplicates === state.toggleDuplicates
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(toggleDuplicates(ownProps.toggleDuplicates))
    }
  };
};

const FilterDuplicates = connect (
    mapStateToProps,
    mapDispatchToProps
)(GlossaryControls);

export default FilterDuplicates;

Martin Dawson · Accepted Answer · 2016-12-26 11:38:33Z

1

createStore is incorrect.

reducer --> initialState --> middleWare

NOT

initialState --> reducer --> middleWare

Because initialState is optional and isn't required for redux unlike reducers.

createStore(
    toggleDuplicatesReducer,
    initialState,
    compose(
        applyMiddleware(createLogger())
    )
);

answered Dec 26, 2016 at 11:38

Martin Dawson

7,6579 gold badges59 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Codesingh · Accepted Answer · 2016-12-26 09:01:34Z

0

What you are doing wrong is returning the same state everytime :

const toggleDuplicates = (state, action) => {
  switch (action.type) {
    case "TOGGLE_DUPLICATES":
      return [...state,action.state];
    default:
      return state;
  }
};

export default toggleDuplicates;

 <input
              type="checkbox"
              checked={this.props.onclick}
              onChange={toggleDuplicates}
 />

edited Dec 26, 2016 at 9:01

answered Dec 26, 2016 at 8:33

Codesingh

3,3941 gold badge14 silver badges19 bronze badges

11 Comments

NoahLE Over a year ago

Thank you for taking the time to reply Codesingh. Returning the same state is intentional for now. The error I'm encountering is the reducer is not receiving an action.type from the action toggleDuplicates. Am I sending the dispatch incorrectly from the checkbox in GlossaryControls or does it have to do something with the action?

Codesingh Over a year ago

please check the edit and reply me if it does not work for you

NoahLE Over a year ago

Unfortunately, I'm still getting the error:

toggleDuplicates.js:2 Uncaught TypeError: Cannot read property 'type' of undefined     at toggleDuplicates (toggleDuplicates.js:2)

. I'm looking at my mapDispatchToProps in GlossaryControls right now to see if that's the troubled area.

NoahLE Over a year ago

I added my actions file to the above code as well, if that helps.

Codesingh Over a year ago

what are you trying to do at onchange in input tag

|

NoahLE · Accepted Answer · 2016-12-27 03:07:37Z

For those looking for a solution, I ended up passing the filter type into a container as keys. The code looks similar to this:

  Show:
  {" "}
  <FilterLink filter="SHOW_ALL">
      All
  </FilterLink>
  {", "}
  <FilterLink filter="HIDE_DUPLICATES">
      Duplicates
  </FilterLink>
</p>

In my code, I needed to send the key (filter) to a container function, which then correctly wired up the components via mapStateToProps and mapDispatchToProps.

const getVisibleEntries = (words, filter) => {
  switch (filter) {
    case "SHOW_ALL": {
      return words;
    }
    case "HIDE_DUPLICATES": {
      return words;
    }
    default: {
      return words;
    }
  }
};

const mapStateToProps = (state) => ({
  words: getVisibleEntries(
      state.words,
      state.toggleDuplicates
  )
});

const mapDispatchToProps = ({
  onEntryClick: toggleDuplicates
});

const VisibleGlossary = connect(
    mapStateToProps,
    mapDispatchToProps
)(GlossaryTable);

export default VisibleGlossary;

Collectives™ on Stack Overflow

Redux - Updating state variable on checkbox toggle (and rerendering component)

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related