Question

我正在使用componentWillMount中的component来调度redux操作

---
params:
n: 100
d: !r Sys.Date()
---
Today’s date is `r params$d`

这将向Api发送请求并获取数据，这就是我的redux动作的外观

  componentWillMount() {
    this.props.fetchCoin()
    this.props.CurrencyRate()
  }

我这样做是为了加载数据

export const fetchCoin = () => {
  return function (dispatch) {
    console.log("here inside Dispatch")
    dispatch({type: CRYPTO_FETCHING}) 
    axios.get(ApiCoinCap).then((response) => {
      console.log("Response from Axios")
      console.log(response)
    return(
    dispatch({
      type: CRYPTO_FETCH_SUCESS,
      payload: response.data
    })
  )
  }).catch((error) => {
    console.log(error)
    return (
  dispatch({
      type: CRYPTO_DATA_FAIL,
      payload: error.data
    })
  )})

  }
}

但是当我在//Redux const mapStateToProps = state => { return { cryptoLoaded: state.posts.itemsSucess, cryptoLoading: state.posts.itemsFetching, currencyLoaded: state.currency.DataSucess } }; export default connect(mapStateToProps, {fetchCoin, updateCrypto, CurrencyRate})(cryptoTicker);中尝试将值输入变量中时，结果表明该对象未加载

componentDidMount

这可能是因为React生命周期方法是异步的吗？？当它编译代码并到达那个点时，还没有达到那个点吗？

[问题] 我上面所说的理解正确吗？如果是，那么我怎么可能在componentDidMount() { this.socket = openSocket('https://coincap.io'); var updateCoinData = [...this.props.cryptoLoaded]; console.log("Crypto loaded redux test", this.props.cryptoLoaded) console.log("Update coin test", updateCoinData) this.socket.on('trades', (tradeMsg) => {中使用var updateCoinData = [...this.props.cryptoLoaded];。一种选择可能是使用componentDidMount() {，但除此之外，我还能做什么？

您可以在此处查看完整的代码：https://github.com/irohitb/Crypto/blob/master/src/container/cryptoContainer.js

Answer 1

使用诸如export class Child2 { // I need this fechedObject here }或redux-thunk之类的redux中间件。

由于redux + react是异步的，因此如果您将redux-saga与redux一起使用，则必须使用中间件

https://github.com/reduxjs/redux-thunk

https://github.com/redux-saga/redux-saga

从API提取数据时使用反应生命周期的正确方法

1 个答案: