AsyncStorage в Redux Thunk, действие не отправляется

Question

Я пытаюсь использовать действия asynchStorage до dispatch при получении данных:

  componentWillMount() {
    AsyncStorage.getItem("loggedIn")
        .then(this.props.dispatch(isLoadingCredentials(true)))
        .then(
            data =>
                data
                    ? this.props
                          .dispatch(setCredentials(JSON.parse(data)))
                          .then(this.props.dispatch(navigate("Month")))
                          .then(
                              this.props.dispatch(
                                  isLoadingCredentials(false)
                              )
                          )
                    : this.props.dispatch(isLoadingCredentials(false))
        );
}

Использование приставки connect

export default connect(mapStateToProps)(HomeScreen);

Я получаю ошибку:

Possible Unhandled Promise Rejection (id: 0):
TypeError: _this2.props.dispatch(...).then is not a function
TypeError: _this2.props.dispatch(...).then is not a function

Как я могу отправлять действия при получении данных?

Answer 1

Попробуйте определить mapDispatchToProps и передать его в качестве второго аргумента вместе с mapStateToProps.

const mapDispatchToProps = dispatch => ({
  isLoadingCredentials: (loadingCredentials) => (
    dispatch(isLoadingCredentials(loadingCredentials))
  )
})

Вы можете использовать bindActionCreators в качестве Pegase745 . Это сокращение для вышеупомянутого.

Затем передайте его своему компоненту через connect.

connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

Тогда вы бы использовали свою функцию следующим образом, обратите внимание, что свойства dispatch нет.

componentWillMount() {
    AsyncStorage.getItem("loggedIn")
        .then(() => this.props.isLoadingCredentials(true))
        ...
}

Вы, вероятно, хотите изменить свой звонок на AsyncStorage, потому что вы звоните isLoadingCredentials(true), как только Обещание будет выполнено.

componentWillMount() {
  this.props.isLoadingCredentials(true);
  AsyncStorage.getItem("loggedIn")
    .then((user) => {
       // You have your User, do as you wish
       // Add setCredentials and others to mapDispatchToProps
    })
    .catch(() => {
      this.props.isLoadingCredentials(false); // Error
    });
}