react-reducex-thunk：調度性能問題

Question

有應用使用react，redux，react-redux，redux-thunk。

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'））的增長取決於存儲中消息的數量？

據我所知，在新的商店構造的時候，消息reducer返回狀態引用，而不創建這部分商店的新副本。

我有更復雜的實際案例，但問題的概念是類似的。

Answer 1

無論何時您改變狀態，它都會創建一個新副本。如果你想提高性能，你應該使用像immutable.js這樣的庫，它提供了許多優化。

從文檔 -

作爲減速器，一個終極版減速器函數來描述：

必須（previousState，動作）=> newState， 類似的功能的類型的簽名你將傳遞給 Array.prototype.reduce（reducer，？initialValue）應該是「純」，其中 意味着reducer：不執行副作用（例如調用 API或修改非本地對象或變量）。不要調用 非純函數（如Date.now或Math.random）。不會改變其參數 。如果reducer更新狀態，則不應該原地修改現有狀態對象 。相反，它應該生成包含必要更改的新對象 。同樣的方法應該是 用於Reducer更新狀態中的任何子對象。

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 

你可以看到test2的比test1的慢。