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

Question

Я пытаюсь вызвать избыточное действие из функции.Компонент, из которого я вызываю функцию, уже подключен к магазину.Однако, это не работает, если я передаю действие, такое как:

function myFunc(action) {
    action()
}

Есть ли способ передать действие через параметр?Спасибо.

Answer 1

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

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

connect(null, { actionCreator })(MyComponent)

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

Puttingвсе вместе:

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

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

  render() { ... }
}

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

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

Answer 2

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