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'））会根据商店中的消息数量增长？

正如我在新商店构建时所理解的那样，消息减少器返回状态引用而不创建这部分商店的新副本。

我有更复杂的实际案例，但问题的概念是相似的。

Answer 1

每次改变状态时都会创建一个新副本。如果你想提高性能，你应该使用像immutable.js这样的库，它提供了很多优化。

来自文档 -

如Reducers中所述，Redux减速器功能：

应该有（previousState，action）=＆gt;的签名newState，   类似于您传递给的函数类型   Array.prototype.reduce（reducer，？initialValue）应该是“纯粹的”，哪个   表示减速器：不执行副作用（例如调用   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慢。

react-redux redux-thunk：调度性能问题

1 个答案: