一 概述
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; }