Question

我正在尝试从函数中调用redux动作。我从中调用函数的组件已经连接到商店。但是，如果我通过了诸如

之类的操作，它将不起作用

function myFunc(action) {
    action()
}

是否可以通过参数传递动作？谢谢。

Answer 1

使用redux中的bindActionCreator是从组件分派操作的最简单方法。

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

class ReduxConnectedComponent extends React.Component {
 mainFunction = () =>{
  this.props.someAction(); // this dispatches your action.
  }
 render(){}
}
const mapStateToProps = store => ({
  test: store.modules.someObject,
});

const mapDispatchToProps = dispatch => bindActionCreators({
  someAction: yourActionCreatorFunction,
}, dispatch);
export default connect(maStateToProps,mapDispatchToProps)(ReduxConnectedComponent)

在mapDispatchToProps中，我们使用bindActionCreator将函数绑定到redux store dispatch。这样，无论何时调用。它实际上调度了商店操作

Answer 2

该操作必须连接到一个调度程序，以使reducer能够捕获它并更新商店。

为此，您应该将操作作为mapDispatchToProps arg包含在redux的connect函数中。看起来像这样：

connect(null, { actionCreator })(MyComponent)

要将连接的动作创建者从组件内部传递给功能，请通过以下属性进行访问：myFunc(this.props.actionCreator)

将它们放在一起：

import myFunc ...
class MyComponent extends React.Component {

  onChange() {
    myFunc(this.props.actionCreator)
  }

  render() { ... }
}

export connect(null, { actionCreator })(MyComponent)

现在，当myFunc执行actionCreator()时，它将正确分派要由减速器捕获的动作。

Answer 3

2021 年更新方法

你现在可以使用钩子来调度任何动作首先从 useDispatch 导入 react-redux，如下所示

import { useDispatch } from 'react-redux';

现在在您的功能组件中创建一个如下所示的变量

const dispatch = useDispatch();

现在可以从任何地方发送/调用任何动作，例如 bellow

dispatch(action());

Redux-函数调用动作

3 个答案: