Javascript Redux-更新复选框切换上的状态变量（并重新命名组件）

编辑：对于那些寻找解决方案的人，请查看下面我提交的解决方案

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

reducers/data.js

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

export default toggleDuplicates;

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

export default words;

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

export default toggleDuplicates;

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

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

export default allReducers;

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;

reducer/toggleDuplicates.js

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

export default toggleDuplicates;

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

export default words;

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

export default toggleDuplicates;

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

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

export default allReducers;

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;

减速机/index.js

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

export default toggleDuplicates;

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

export default words;

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

export default toggleDuplicates;

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

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

export default allReducers;

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;

容器/词汇控件

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

export default toggleDuplicates;

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

export default words;

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

export default toggleDuplicates;

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

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

export default allReducers;

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;

从“React”导入React；
从“react redux”导入{connect}；
从“./actions/actions”导入切换重复项；
let GlossaryControls=（道具）=>{
返回(
{" "}
隐藏重复项
);
};
const mapStateToProps=（state，ownProps）=>{
返回{
toggleDuplicates:ownProps.toggleDuplicates===state.toggleDuplicates
};
};
const mapDispatchToProps=（调度，ownProps）=>{
返回{
onClick:（）=>{
分派（toggleDuplicates（ownProps.toggleDuplicates））
}
};
};
const FilterDuplicates=连接(
MapStateTops，
mapDispatchToProps
)（词汇控制）；
导出默认筛选器副本；

您做错的是每次都返回相同的状态：

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

导出默认切换重复项

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

不正确

减速器-->初始状态-->中间件

不是

initialState-->减速器-->中间件

因为

initialState

是可选的，与redux不同，redux不需要它

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

---

对于那些寻找解决方案的人，我最终将过滤器类型作为键传递到容器中。代码与此类似：

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

---

感谢您抽出时间回复Codesingh。目前，返回相同的状态是有意的。我遇到的错误是reducer没有从action

toggleDuplicates

接收action.type。我是否从GlossaryControls中的复选框发送了错误的分派，或者它与操作有关？请检查编辑，如果它对您不起作用，请回复我。不幸的是，我仍然收到错误：

toggleDuplicates.js:2 Uncaught TypeError:无法读取toggleDuplicates处未定义的属性“type”（toggleDuplicates.js:2）

。我正在查看

GlossaryControls

中的

mapDispatchToProps

，看看这是否是问题所在。如果有帮助的话，我还将我的

操作

文件添加到上述代码中。一旦更改输入标记，你打算做什么