reactjs - 当我使用bindActionCreators时，不会调用Dispatch

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 无关；它们可能是复制粘贴错误，或实际问题:

1. 您的第二个示例包含语法错误；装饰器末尾不应有分号:

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

2. 您在事件处理程序中调用的函数(在两个示例中)似乎没有定义；为了让它们按照书面方式工作，您需要从 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 可以接受一个简单的对象作为第二个参数，并且它会假设该对象上的每个值都是一个要绑定(bind)到的操作创建者:

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

[编辑]

自从您导入搜索通过

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

您可以使用别名导入它

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

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

@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)} />
);