2016-11-29 11 views
1

ページネーションシステムを作成しています。
減速部は次のようになります。状態を変更せずにデータを追加する方法

(state, payload)=> { 
      if (state.venues === null) { 
        state.venues = []; 
      } 
      state.venues.push.apply(state.venues, payload.data) 
      return { 
        ...state, 
        isRequesting: false, 
        hasVenues: true, 
        venues: state.venues, 
        hasMessage: false 
      } 
    }, 

私はコンポーネントにstate.venuesを反復します。
問題は、最初の要求ではstate.venuesがnullなので、空の配列に変換してペイロードを追加する必要があります。
しかし、このアプローチでは、許可されていない(推奨する)状態をreduxで変更すると思います。
どのように状態の変異なしでこれを達成できますか?

答えて

0

これに対処するには、state.venuespayload.dataを追加し、payload.dataを応答として返します。会場の新しい配列を作成するには

  payload.data.push.apply(payload.data, state.venues) 
      return { 
        ...state, 
        isRequesting: false, 
        hasVenues: true, 
        venues: payload.data, 
        hasMessage: false 
      } 
2

スプレッド演算子を使用します。あなたは状態を変異避けるためにObject.assignを使用することができます

var newVenues = [ 
    ...state.venues, 
    'Tokyo' 
]; 

を:

var newState = Object.assign({}, state, { venues: newVenues }); 

(私が残してきました明確にするためにあなたの例では州の他の部分を出す)。あなたが繰り返しオブジェクトの広がりを使用するか、自分自身を見つける場合

0

あなたはconcat

連結でpushを置き換えることができますがBTW元の値

(state, payload) => { 
    if (state.venues === null) { 
     state.venues = []; 
    } 
    const newVenues = state.venues.concat(payload.data) 
    return { 
     ...state, 
     isRequesting: false, 
     hasVenues: true, 
     venues: newVenues, 
     hasMessage: false 
    } 
    } 

を変異させずに新しい配列を返すアレイの純粋関数でありますすべてのサブレデューサー/ネストされた状態でObject.assign。あなたは使用を検討する必要がありますImmutable.js

関連する問題