Angular4 ngrxstore簡介和安裝

1 ngrx store 簡介

對于ngrx store 在angualr2/4 的官方文檔介紹不多。所以我在這里簡單介紹一下ngrx store的概念。ngrx store 是借用redux 對于single page application的狀態(tài)管理（state management）理念并且結合了rxjs來實現(xiàn)的。隨著single page application  （單頁web應用）變得越來越復雜，前端對于state management(狀態(tài)管理) 變得日益困難。 傳統(tǒng)的mvc 結構框架沒法輕易解決前端對于數(shù)據(jù)的處理，不同于j2ee 應用，不同頁面的數(shù)據(jù)交互可以通過session 或者cookie 來解決。 在angualr里面不同component ，module(模塊)間的交互，最常用的是使用service 來共享數(shù)據(jù)。 但是隨著component 和模塊的增多。 service對于共享數(shù)據(jù)的處理讓應用變得越來越混論和難以管理。所以ngrx-store 橫空出世， 用來解決發(fā)雜的單頁應用的狀態(tài)管理。

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

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

這個原則是整個單頁應用的狀態(tài)通過object tree（對象樹）的形式存儲在store 里面。這個定義十分抽象其實就是把所有需要共享的數(shù)據(jù)通過javascript 對象的形式存儲下來

例子

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

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

這個ngrx-store 核心之一就是用戶不能直接修改狀態(tài)內(nèi)容。 舉個例子，如果我們需要保存了登錄頁面狀態(tài)，狀態(tài)信息需要記錄登錄用戶的名字。 當?shù)卿浢指淖?，我們不能直接修改狀態(tài)保存的用戶名字

state={'username':'kat'},
//用戶重新登錄別的賬戶為tom
state.username = 'tom'  //在ngrx store 這個行為是絕對不允許的

那么你也許會為，不這樣修改我怎么修改??？ 這里ngrx 引入了一個action的概念。通過store.dispatch(action)觸發(fā)修改。 之后我會使用例子說明

3 changes are made with pure functions（只能通過調用函數(shù)來改變狀態(tài)）

由于不能直接需改狀態(tài)，ngrx store 同時引入了一個叫做reducer（聚合器）的概念。通過reducer 來修改狀態(tài)。

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',
  }