反応還元還元サンク：発送性能問題

Question

反応、還元、反応還元、還元サンクを使用するアプリケーションがあります。

react:  "16.0.0-alpha.6" 
redux:  "3.6.0" 
react-redux: "5.0.2" 
redux-thunk: "2.1.0" 

コンセプト：

リデューサー：

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware     from 'redux-thunk'; 

export const MESSAGES_ADD_MESSAGE = 'MESSAGES_ADD_MESSAGE'; 
export const CONTACTS_ADD_CONTACT = 'CONTACTS_ADD_CONTACT'; 

export default function messages(state = { messages: [] }, action) { 
    switch (action.type) { 
     case MESSAGES_ADD_MESSAGE: 
      return { messages: [ ...state.messages, action.message ] }; 
     default: 
      return state; 
    } 
} 

export default function contacts(state = { contacts: [] }, action) { 
    switch (action.type) { 
     case CONTACTS_ADD_CONTACT: 
      return { contacts: [ ...state.contacts, action.contact ] }; 
     default: 
      return state; 
    } 
} 

const rootReducer = combineReducers({ 
    contacts, 
    messages 
}); 

ストア：

const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware 
)(createStore); 

const store = createStoreWithMiddleware(rootReducer); 

アクションクリエイター：

export function addMessage(message) { 
    return { 
     type: MESSAGES_ADD_MESSAGE, 
     message 
    }; 
} 

export function addContact(contact) { 
    return { 
     type: CONTACTS_ADD_CONTACT, 
     contact 
    }; 
} 

ディスパッチの時間（addContact（ 'Viktor +123456789'））は、ストア内のメッセージ数に応じて増加するのはなぜですか？

私は新しい店舗構成の時代を理解しているので、メッセージリデューサーはこの店舗の新しい部分を作成せずに状態参照を返します。

私はもっと複雑な実際のケースを持っていますが、問題の概念は似ています。

Answer 1

状態を変更するたびに新しいコピーが作成されます。パフォーマンスを向上させたい場合は、多くの最適化を提供するimmutable.jsなどのライブラリを使用する必要があります。ドキュメントから

-

レデューサー、Reduxのリデューサ機能で説明したように：

は、関数の型に似た（previousState、アクション）=> NewStateに、 の署名を持っているはずです Array.prototype.reduce（reducer、？initialValue） は還元剤を意味する「純粋」である必要があります。副作用（APIの呼び出しや非ローカルオブジェクトや変数の変更など）は行いません。非純粋な関数（Date.nowやMath.randomなど）を と呼ぶことはありません。その 引数を変更しません。レデューサーが状態を更新する場合は、既存の状態オブジェクトをインプレースで変更するべきではありません（ ）。代わりに、必要な変更を含む新しい オブジェクトを生成する必要があります。同じアプローチは、還元剤が更新される状態内のサブオブジェクトに使用される である必要があります。あなたはTEST2を見ることができます

var makeArray = function() 
{ 
    var temp = []; 
    for(let i= 0, i < 10000; i++)  
    temp.push(i); 
    return temp; 
} 

var e = makeArray(); 
var f = makeArray(); 

function test1() 
{ var x = e.push(8); 
} 


var t2 = performance.now(); 

test1(); 

var t3 = performance.now(); 


t3-t2 //0.02 



function test2() 
{ var y = [...f, 8] 
} 


var t2 = performance.now(); 

test2(); 

var t3 = performance.now(); 


t3-t2 //1.98 

はtest1のより遅いです。