javascript - Redux - 更新复选框切换上的状态变量(和重新渲染组件)

Question

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

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

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

我现在遇到的问题是我没有正确从 containers/GlossaryControls.js 分派(dispatch) toggleDuplicates 操作。

代码的副本可以是 found here .

预先感谢您的帮助!

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;

容器/词汇表控件

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 --> initialState --> middleWare

不是

initialState --> reducer --> middleWare

因为 initialState 是可选的，并且与 reducer 不同，redux 不需要它。

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