redux中state不能直接修改

2,912 阅读1分钟

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 采用了持久化数据结构结构共享,保证每一个对象都是不可变的,任何添加、修改、删除等操作都会生成一个新的对象,且通过结构共享等方式大幅提高性能。原理参考:

segmentfault.com/a/119000001…

www.jianshu.com/p/825b7b4c4…