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を想定しています。