Angular4 ngrxstore簡介和安裝

1 ngrx store 簡介

對於ngrx store 在angualr2/4 的官方文檔介紹很少。因此我在這裏簡單介紹一下ngrx store的概念。ngrx store 是借用redux 對於single page application的狀態管理（state management）理念而且結合了rxjs來實現的。隨着single page application  （單頁web應用）變得愈來愈複雜，前端對於state management(狀態管理) 變得日益困難。 傳統的mvc 結構框架無法輕易解決前端對於數據的處理，不一樣於j2ee 應用，不一樣頁面的數據交互能夠經過session 或者cookie 來解決。 在angualr裏面不一樣component ，module(模塊)間的交互，最經常使用的是使用service 來共享數據。 可是隨着component 和模塊的增多。 service對於共享數據的處理讓應用變得愈來愈混論和難以管理。因此ngrx-store 橫空出世， 用來解決發雜的單頁應用的狀態管理。

State manage(狀態管理) 有三個原則

1 Single source of truth(單一狀態對象)

這個原則是整個單頁應用的狀態經過object tree（對象樹）的形式存儲在store 裏面。這個定義十分抽象其實就是把全部須要共享的數據經過javascript 對象的形式存儲下來

例子

state =
{
    application:'angular4',
    shoppingList:['iphone'.'HTC']
}

2state is read-only(狀態只能是隻讀形式)

這個ngrx-store 核心之一就是用戶不能直接修改狀態內容。 舉個例子，若是咱們須要保存了登陸頁面狀態，狀態信息須要記錄登陸用戶的名字。 當登陸名字改變，咱們不能直接修改狀態保存的用戶名字

state={'username':'kat'},
//用戶從新登陸別的帳戶爲tom
state.username = 'tom'  //在ngrx store 這個行爲是絕對不容許的

那麼你也許會爲，不這樣修改我怎麼修改啊？ 這裏ngrx 引入了一個action的概念。經過store.dispatch(action)觸發修改。 以後我會使用例子說明

3 changes are made with pure functions（只能經過調用函數來改變狀態）

因爲不能直接需改狀態，ngrx store 同時引入了一個叫作reducer（聚合器）的概念。經過reducer 來修改狀態。

function reducer(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return Object.assign({},newObj);  
      
      default:
      return state  }}

4 如何安裝ngrx store

npm install @ngrx/core @ngrx/store --save

4.1 若是你使用的angular-cli 那麼webpack會自動幫你處理配置

你只須要import 就可使用

import { Store } from '@ngrx/store';

4.2 若是你使用時舊版的systemjs文件的那麼你須要

添加

map: {
    '@ngrx/store': 'nodemodules/@ngrx/store/**/bundles/*.js',
  }