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的慢。