реагировать / редукция - Как отправить действие на componentDidMount

Question

Я пытаюсь отправить действие на мой ComponentDidMount, но оно никогда не работает.

Ситуация такова: я создал функцию для переключения языка на редуктор, который инициализирует язык в браузереязык.И я хочу изменить язык на первый язык, доступный в моем API, когда я вызываю свой компонент.

Я пробовал много вещей из StackOverflow, и я не понимаю, почему, когда я помещаю свою функцию в рендер(onClick, onScroll) он работает нормально, но на моем componentDidMount это не так.

Вот мой код:

import {switchLanguage} from '../actions/langs'

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      langs: langs
    };

    let switchLanguage = this.props.switchLanguage;
  }

  componentDidMount() {
    switchLanguage(1, 'fr')
  }

  render() {
    [...]
  }
}

function mapStateToProps(state) {
  return {langId: state.languageReducer.id, language: state.languageReducer.language}
}

function mapDispatchToProps(dispatch) {
  return {
    switchLanguage: (id, lang) => dispatch(switchLanguage(id, lang))
  }
}

Header = connect(mapStateToProps, mapDispatchToProps)(Header);

export default injectIntl(Header);

Я новичок в Redux, я просто следую редукцииучебник для этого.

Может ли кто-нибудь мне помочь?

Answer 1

Подсказка находится в названии mapDispatchToProps.

Если вы посмотрите на определение mapDispatchToProps, switchLanguage (ключ) - это функция, которая вызывает dispatch (она что-то отправляет).

Поскольку вы отображаете это ...ToProps, имеет смысл только найти функцию, вызывающую диспетчеризацию в props.

Следовательно, this.props.switchLanguage с любыми необходимыми аргументами.

Answer 2

эта строка в вашем конструкторе

let switchLanguage = this.props.switchLanguage;

ничего не делает, потому что переменная, объявленная с let, "умирает" в конце оператора constructor() { }.Вы должны назвать это так:

componentDidMount() {
   this.props.switchLanguage(1, 'fr')
}

Answer 3

В вашем конструкторе у вас есть это let switchLanguage = this.props.switchLanguage;, но проблема в том, что ваш this.props.switchLanguage не принимает никаких параметров, и когда вы пытаетесь вызвать в componentDidMount, вы пытались передать параметры switchLanguage(1, 'fr'), что, конечно, неза работой.

Вместо этого вы можете напрямую вызвать метод в componentDidMount(), как показано ниже, и удалить объявление метода в конструкторе

componentDidMount(){
  this.props.switchLanguage(1, 'fr');
}

Answer 4

Я думаю, вам следует позвонить this.props.switchLanguage(1, 'fr') на ваш componentDidMount