redux中不能直接修改state原因:
redux会通过引用来判断前后两次state有没有变化
直接修改了state对象,然后返回的还是原来的state对象(被修改过的)
return原来的state的话redux会认为你的state没有变化,从而无法记录时光旅行,快照,历史等。
那么react组件就认为state无变化则不更新组件
解决方案:创建新的对象,改变引用(创建新的引用),新建了一个副本。
Object.assign({}, state, {
visibilityFilter: action.filter
})
或者
{...state, visibilityFilter: action.filter}
或者immutable
import { Map } from "immutable";
import { GLOBAL_LOAD_STRATEGY_CONFIG,
GLOBAL_SET_DEBUG, GLOBAL_SET_CARD_BIND_DIALOG}
from "../constants/ActionTypes";
const initialState = Map({
config: Map({}),
debug: false,
showCardBindDialog: false
});
export default function global(state = initialState, action)
{ switch (action.type) {
case GLOBAL_LOAD_STRATEGY_CONFIG:
return state.set("config", action.config);
case GLOBAL_SET_DEBUG:
return state.set("debug", action.debug);
case GLOBAL_SET_CARD_BIND_DIALOG:
return state.set("showCardBindDialog", action.visible);
default:
return state;
}}
Immutable.js 采用了持久化数据结构
和结构共享
,保证每一个对象都是不可变的,任何添加、修改、删除等操作都会生成一个新的对象,且通过结构共享
等方式大幅提高性能。原理参考: