如何将异步数据传递给分派动作，以便我可以在动作创建者中使用它？

Question

Redux 是 harrrrd...至少对我来说，它是！！！有人可以向我解释一下如何通过 mapDispatchToProps 将这个获取的 json[0] 传递给我的动作创建者吗？我做对了吗？我正在使用 redux-thunk，这是正确的使用方法吗？

state = {
    articles: {
      article: []
    }
  };

  qrCodeOnReadHandler = ({ data }) => {
    this.props.onQRRead();
    console.log(this.props.art);
    fetch(data)
      .then(response => response.json())
      .then(json => {
        console.log(json),
          // () => this.props.onQRRead(json[0]),
          this.setState({
            ...this.state,
            articles: {
              ...this.state.articles,
              article: json[0]
            }
          });
      });
  };

正在连接 redux

const mapStateToProps = state => {
  return {
    art: state.articles.article
  };
};
const mapDispatchToProps = dispatch => {
  return {
    onQRRead: () => dispatch(article())
  };
};

动作创作者

export const fetchedArticle = res => {
  return {
    type: ARTICLE,
    res: res
  };
};

export const article = res => {
  return dispatch => {
    dispatch(fetchedArticle(res));
  };

};

Answer 1

how can I pass this fetched json[0] through mapDispatchToProps to my action creator

您必须让您的 onQRRead 收到这样的参数：

const mapDispatchToProps = dispatch => {
  return {
    onQRRead: payload => dispatch(article(payload))
  };
};

函数参数的名称是任意的。

现在，您可以像刚才那样使用它：

this.props.onQRRead(json[0])

如何将异步数据传递给分派动作，以便我可以在动作创建者中使用它？

How to pass async data to dispatch action so I can use it in action creator?

reactjs

react-native

redux

redux-thunk