将阵列与React和Redux结合使用

Question

我有一个像Facebook聊天窗口一样工作的聊天窗口小部件。当我向上滚动时，我正在实现无限的消息加载。我现在遇到的问题是如何将下一个消息范围与前一个范围结合起来，因为当前我在调用下一个范围时会替换先前的范围。我已经把我的代码示例为简洁：

constructor(props) { 
    super(props); 
    this.props.getMessages(1) // axios call, returns first range 
} 

handleScroll(event) { 
    //some scroll logic 
    this.props.getMessages(2) 
    //axios call, returns 2nd range 
    //for simplicity i just call 2 ranges for now 
} 


function mapStateToProps(state) { 
    return { 
    messages: state.messages 
    }; 
} 

export default function (state = {fetched: false}, action) { 
    switch (action.type) { 
     case 'FETCH_MESSAGES_FULFILLED': 
      return {...state, 
      data: action.payload 
      } 
     break; 
    } 
    return state; 
} 

数据模型：

[ 
     { 
      msg_id: 1, 
      to_id: 1, 
      from_id: 2, 
      message: "Marzipan jelly-o croissant sweet gummies chocolate croissant marzipan. Jujubes soufflé tiramisu halvah chocolate oat cake jelly1" 
     }, 
     { 
      msg_id: 2, 
      to_id: 1, 
      from_id: 2, 
      message: "Jelly sw2" 
     } 
] 

Answer 1

你希望将消息附加到数据，而不是取代它。与扩散运算符的语法你可以简单做到像

var initialState = { 
    fetched: false, 
    data: [] 
} 
export default function (state = initialState, action) { 
    switch (action.type) { 
     case 'FETCH_MESSAGES_FULFILLED': 
      return {...state, 
      data: [...state.data, action.payload] 
      } 
     break; 
    } 
    return state; 
} 

这是假设data是一个数组。