Question

如果我明确写出了调度函数，我能够获得更新我的redux商店onChange的输入。当我尝试使用bindActionCreators()时，为什么它会停止工作？

不使用bindActionCreators （这可行）

@connect(
  state => ({}),
  dispatch => {
    return {
      onSearchChange: (term) => {
        dispatch(search(term));
      }
    };
  }
)

export default class SearchForm extends Component {
  render() {
    return (
      <input type="text" onChange={(event) => onSearchChange(event.target.value)} />
    );
  }
}

使用bindActionCreators （这不起作用。它永远不会调度操作）

@connect(
  state => ({ categories: state.categories.data }),
  dispatch => bindActionCreators({search}, dispatch)
);

export default class SearchForm extends Component {
  render() {
    return (
      <input type="text" onChange={(event) => search(event.target.value)} />
    );
  }
}

Answer 1

这里有几个问题似乎与Redux语法无关;它们可能是复制粘贴错误或实际问题：

您的第二个示例包含语法错误;在装饰者的末尾不应该有分号：

repl: Leading decorators must be attached to a class declaration (4:1)
  2 |   state => ({ categories: state.categories.data }),
  3 |   dispatch => bindActionCreators({search}, dispatch)
  4 | );
    |  ^

您在事件处理程序中调用的函数（在两个示例中）似乎都没有定义;为了让他们按照书面形式工作，您需要从this.props：
中提取函数
```
export default class SearchForm extends Component {
  render() {
    const { search } = this.props;
    return (
      <input type="text" onChange={(event) => search(event.target.value)} />
    );
  }
}
```
如果示例是在您的代码中编写的，我希望第一个示例失败，除非在范围内声明了onSearchChange函数。

作为一种捷径，connect可以接受一个简单的对象作为第二个参数，并且它将假设该对象上的每个值都是一个动作创建者，以便它绑定到：

@connect(
  state => ({ categories: state.categories.data }),
  { search }
)
export default class SearchForm extends Component {

<强> [编辑]

由于您通过

search

import {search} from 'redux/modules/repo-search';

您可以使用别名

import { search as searchActionCreator } from 'redux/modules/repo-search';

如果你这样做，那么connect需要知道你真正想要用于道具的价值：

@connect(
  state => ({ categories: state.categories.data }),
  {search: searchActionCreator}
)
export default class SearchForm extends Component {
  render() {
    const { search } = this.props;
    return (
      <input type="text" onChange={(event) => search(event.target.value)} />
    );
  }
}

或者，只需在this.props内使用render中的其他变量名称或函数路径：

return (
  <input type="text" onChange={(event) => this.props.search(event.target.value)} />
);

当我使用bindActionCreators时，不会调用disppatch

1 个答案: