ngrx結合localStorage，刷新頁面防止數據丟失

ngrx結合localstorage思路(下面是獲取用戶信息)：
1.登陸的時候接口會返回用戶資料，
2.initialState默認讀取localStorage裏面的用戶信息
3.訂閱state裏面的loginInfo，store.pipe(select('loginInfo'))，實時獲取數據
4.更新數據：一旦調用了this.store.dispatch(getLoginInfo({...}))方法更改了數據，步驟3就可以訂閱到，
5.爲防止刷新頁面後信息丟失，調用getLoginInfo()方法後，更新localstorage裏面的信息，然後initialState會被獲取最新的用戶信息

login.component.ts (登陸事件，存儲登陸數據)

login(){
    this.loginService.login(params).subscribe(data =>{
        localStorage.setItem('USERINFO',JSON.stringify(data.userinfo));
    })
}

 action.ts

import { createAction,props } from '@ngrx/store';

export const getLoginInfo = createAction(
  '[getLoginInfo Page] getLoginInfo',
   props<{payload:any}>()
);

reducer.ts

...

// 設置初始值 
const userInfo = localStorage.getItem('USERINFO');
export const initialState: any = userInfo;

const _loginInfoReducer = createReducer(initialState,
    on(getLoginInfo, (state, action) => { // getLoginInfo是action.ts中定義的方法
        return ({
            ...state,
            ...action.payload
        })
    })
);

...

 update.component.ts

 update(){
   const params = {
     username:'貂蟬',
     phone:'1511111111',
     sex:'女',
     ...
   }
   // 更新用戶信息
   this.loginService.update(params).subscribe(data =>{
        // 更新localStorage裏面的信息
        localStorage.setItem('USERINFO',JSON.stringify(data.userinfo));
        // 更新store裏面的信息
        this.store.dispatch(getLoginInfo({
            payload:{
            ...params 
           }
        }));
   })
}

大功告成！