时间戳

首页 > 解决方案 > Redux 发现 prevState 和 currentState 的变化

reactjs - Redux 发现 prevState 和 currentState 的变化

问题描述

我正在创建一个加密代码应用程序（使用 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
  }
}

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

我怎样才能做到这一点？

标签： reactjsreact-nativeredux

解决方案

这是因为 reducer 没有正确更新状态。react仅当状态发生变化时才重新渲染。作为updateCoinData一个数组，最好使用以下代码

case REDUCER_TYPE: return Object.assign({}, state, { array: action.array })

您可以使用componentWillReceiveProps. 如果您从中获得新props的信息，这将执行reducers 

componentWillReceiveProps(nextProps){ 
  if(this.props.property != nextProps.property){ 
     ///do what ever you want 
  } 
}

推荐阅读