当我使用 bindActionCreators 时不调用 Dispatch

Question

如果我明确写出调度函数，我就可以在 onChange 上获得更新我的 redux 存储的输入。为什么当我尝试使用 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)} />
    );
  }
}

或者，只需在 render:

中使用不同的变量名或 this.props 中函数的路径

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

当我使用 bindActionCreators 时不调用 Dispatch

Dispatch isn't called when I use bindActionCreators

reactjs

reactjs-flux

redux