Redux - вызов действия из функции

использование bindActionCreator из redux - самый простой способ диспетчеризации действий из компонента.

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 для привязки функции к reduxstoredispatch. так что всякий раз, когда вы это называете. он фактически отправляет действие магазина

Действие должно быть связано с диспетчером, чтобы редуктор его поймал и обновил хранилище.

Для этого вы должны включить свое действие в качестве аргумента mapDispatchToProps для функции подключения redux. Это выглядело бы так:

connect(null, { actionCreator })(MyComponent)

Чтобы передать создателя связанного действия функции из компонента, откройте его через props: myFunc(this.props.actionCreator)

Собираем все вместе:

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

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

  render() { ... }
}

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

Теперь, когда myFunc выполняет actionCreator(), он правильно отправляет действие, которое будет обнаружено вашим редуктором.

ОБНОВЛЕННЫЙ ПОДХОД 2021

Теперь вы можете использовать ловушку для отправки любого действия Сначала импортируйте useDispatch из react-redux, как показано ниже.

import { useDispatch } from 'react-redux';

Теперь внутри вашего функционального компонента создайте переменную, как показано ниже

const dispatch = useDispatch();

теперь отправляйте / вызывайте любое действие, подобное приведенному ниже, из любого места

dispatch(action());