Question

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

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

我正在编写一个Redux应用程序，它会在选中复选框时更新状态。现在，当我选中复选框时，我正在努力让商店正确更新。

我现在遇到的问题是我没有正确地从toggleDuplicates发送containers/GlossaryControls.js操作。

代码的副本可以是found here。

提前感谢您的帮助！

操作/ actions.js

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

export default toggleDuplicates;

减速器/ data.js

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

export default words;

减速器/ 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;

减速器/ index.js

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

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

export default allReducers;

容器/ 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;

Answer 1

createStore不正确。

reducer - ＆gt; initialState - ＆gt;中间件

不是

initialState - ＆gt;减速机 - ＆gt;中间件

因为%5E是可选的，并且与reducer不同，并不是redux所必需的。

.active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button {
    background-color: #ffffff;
    border: medium none !important;
    border-radius: 15px;
    color: #333333;
    font-size: 11px;
    height: 22px;
    outline: medium none;
    padding: 0 11px;
}

Answer 2

你做错了每次都返回相同的状态：

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}
 />

Answer 3

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

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

在我的代码中，我需要将密钥（过滤器）发送到容器函数，然后通过mapStateToProps和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;

Redux - 在复选框切换（和重新渲染组件）上更新状态变量

3 个答案: