Redux

Question

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

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

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

我现在遇到的问题是我没有正确地从 containers/GlossaryControls.js 发送 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;

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;

Answer 1

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

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

Answer 2

createStore 不正确。

reducer --> initialState --> middleWare

不是

initialState --> reducer --> middleWare

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

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

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 - 在复选框切换时更新状态变量（和重新渲染组件）

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

javascript

reactjs

react-redux