javascript - 将 Action 连接到函数

Question

最近我一直在使用react类并使用mapStateToProps和react-redux连接，因此我能够在我的类中使用操作，但是现在我正在尝试编写不属于的函数到如下的类

import { some_imported_action } from '../actions/my_actions';

export function f() {
  some_imported_action();
}

但是我在尝试让函数运行导入的操作时遇到问题，我假设问题是尝试使用react-redux 连接函数而不是类。当我运行上面的代码时，没有任何反应，没有错误，但操作不执行。

我尝试导入 prop-types 并制作所需的功能

some_imported_action: PropTypes.func.isRequired

我尝试运行它时遇到的错误与“this”或“props”在行中未定义有关。

this.props.some_imported_action();

我认为如果没有类(class)，这甚至是不可能的，有什么想法吗？谢谢

Answer 1

当您的 f() 函数被调用时，Redux 不会发生任何事情，因为操作创建者 (some_imported_action) 未连接到您的商店。

Redux 操作需要使用 store.dispatch 函数进行分派(dispatch)，以便由 reducers 处理。connect函数来自 react-redux接收一个 mapDispatchToProps 对象或函数作为第二个参数:

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

If a function is passed, it will be given dispatch as the first parameter. It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way.

传递与存储 dispatch 绑定(bind)的名为 someAction 的回调属性的示例:

import { connect } from 'react-redux';
const someAction = () => ({ type: 'SOME_ACTION' });

function MyComponent({ someAction }) {
    return <div onClick={someAction}>...</div>;
}

export default connect(null, { someAction })(MyComponent);

阅读与 React-Redux 相关的更多信息 connect