一 概述
Redux只是检测引用是否改变。
如果状态树的某个值是对象、数组等,在reducer中需要生成一个新对象、新数组,才能被Redux检测到变更。
let fruits = ['apple','banana'];
let newFruits = [...fruits,'orange']; // 使用结构赋值,创建新数组。
如果只是改变对象的属性,或者使用数组的push、splice等方法,Redux会认为状态树没有变更,组件也不会重新渲染。
Redux、DvaJS(对Redux的封装)都存在这个问题。
二 代码
redux安装包中的redux.js的代码片段。
function combination() {
// 此处省略若干代码 var hasChanged = false;
var nextState = {};
for (var _i = 0; _i < finalReducerKeys.length; _i++) {
var _key = finalReducerKeys[_i];
var reducer = finalReducers[_key];
var previousStateForKey = state[_key];
var nextStateForKey = reducer(previousStateForKey, action);
if (typeof nextStateForKey === 'undefined') {
var errorMessage = getUndefinedStateErrorMessage(_key, action);
throw new Error(errorMessage);
}
nextState[_key] = nextStateForKey;
// 只是比较引用是否相同
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
return hasChanged ? nextState : state;
}