使用immutable.js來管理store中的資料
阿新 • • 發佈:2018-12-03
安裝:
yarn add immutable
將state變為immutable物件,以防止state被改變
import { fromJs } from 'immutable'
fromJs 方法可以把一個js物件轉化為一個immutable物件;
利用這個方法把state物件轉化為immutable物件:
const defaultState=fromJs({
focused:false
});
這個時候在header元件的index.js中對state中資料的呼叫方式
不能用 '.focused'的方式
const MapStateToProps=(state)=>{ return { focused:state.header.focused } };
而要變為:
{
focused:state.header.get('focused')
}
header元件下的store/reducer.js檔案
import {SEARCH_FOCUS,SEARCH_BLUR} from './actionTypes';
import { fromJs } from 'immutable'
const defaultState=fromJs({
focused:false
});
export default(state=defaultState,action)=>{
if(action.type===SEARCH_FOCUS){
// return{
// focused:true
// }
immutable物件的set方法,會結合之前的immutable物件的值和設定的值,返回一個全新的物件
return state.set('focused',true);
}
if(action.type===SEARCH_BLUR){
// const newState=state;
// newState.focused=true;
// return newState;
// return{
// focused:false
// }
return state.set('focused',false);
}
return state
}