Question

我正在创建一个加密货币报价器应用程序（使用websocket形式Socket.io），在其中将所有加密货币详细信息存储在redux存储中。

Websocket仅向我提供其值已更改的硬币的数据，接收到此数据后，我将分派一个操作，用该新硬币值更新redux存储。

 componentDidUpdate() {
    var socket = openSocket('https://coincap.io');
    var updateCoinData = [...this.props.cryptoLoaded]; //
    let refinedData = {}
     socket.on('trades', (tradeMsg) => {  
      for (let i=0; i<updateCoinData.length; i++) {

        if (updateCoinData[i]["short"] == tradeMsg.coin ) {  
          console.log(tradeMsg.coin)                      
        //Search for changed Crypto Value 

        updateCoinData[i]["perc"] = tradeMsg["message"]["msg"]["perc"]
        updateCoinData[i]['price'] = tradeMsg['message']['msg']['price']


        //Update the crypto Value state in Redux
        this.props.updateCrypto(updateCoinData);
        console.log("we are inside websocket")
          }
        }
     })
  }

为此我调度一个动作，然后在减速器中更新这样的状态

export default function(state = initialState, action) {

  switch(action.type) {
    case CRYPTO_FETCHING:
    return {
      ...state,
      itemsSomething: action.payload
    }
    case CRYPTO_FETCH_SUCESS:
      return {
        ...state,
        itemsSucess: action.payload
      }
      case CRYPTO_DATA_FAIL:
      return {
      ...state,
      itemsFail: action.payload
    }
    case UPDATE_CRYPTO_DATA:
    return {
    ...state,
    itemsSucess: action.payload
    }
    default:
      return state
  }
}

现在，我要突出显示其值已更改（可能将文本变为粗体或更改背景）的硬币，需要将其先前状态与新状态进行比较。

我该如何实现？

Answer 1

这是因为减速器未正确更新状态。 override fun onDataChange(snapshot: DataSnapshot?) { MyList.clear() for (child: DataSnapshot? in snapshot.getChildren()) { var data = child!!.value as HashMap<String,Any> ...仅在状态发生变化时才重新渲染。由于react是一个数组，因此最好使用以下代码

updateCoinData

您可以使用case REDUCER_TYPE: return Object.assign({}, state, { array: action.array })。如果您从componentWillReceiveProps

获得新的props，则将执行此操作

reducers

Redux查找prevState和currentState中的更改

1 个答案: