Redux

1、Redux是什麼

狀態是什麼？狀態是影響到UI改變的數據，包括顯示的內容，操做。

狀態是碎片化的，存在各個component和service中。

Redux是狀態的集中管理。

Redux:是全局的、惟一的、不可改變的內存狀態【數據庫】

它不會改變它原有的狀態，每次返回一個新的狀態。

2、redux三個角色

Action:事件，信號，發出後被Reducer處理，經過Store

Reducer:純函數，基於不一樣Action返回不一樣狀態

Store: 狀態得到的源頭，

計數器的例子：

 

reducer是一個純函數，能夠接收到【任何】Action,而不是某個特定的Action。

reducer不改變狀態，只返回新的狀態。

3、實踐

工具：Redux DevTools

更準確的定位到程序。

安裝：

cnpm i --save @ngrx/core@1.2.0 @ngrx/store@2.2.3 @ngrx/router-store@1.2.6 @ngrx/effects@2.0.4 @ngrx/store-devtools@3.2.4

新版本

 

根據環境返回不一樣Reducer。 

好處：

• 團隊協做不會誤操做。
• 屏蔽細節。

定義Action

quote.action.ts
export const QUOTE ='Quote';
export const QUOTE_SUCCESS = 'Quote Success';
export const QUOTE_FAIL = 'Quote Fail';

reducer返回新狀態

return Object.assign({},state,{quote:action.payload});

//es6 簡化形式
return {...state, quote:action.payload};

store

@NgModule({
  imports: [
    /**
     * StoreModule.provideStore  僅需引入一次，請把它包含在根模塊或者 CoreModule 中
     * 咱們這裏爲了方便組織，新建了一個 AppStoreModule，但也是隻在 CoreModule 中引入的
     */
    StoreModule.provideStore(reducer),
    RouterStoreModule.connectRouter(),
    // DevTool 須要在 StoreModule 以後導入
    StoreDevtoolsModule.instrumentOnlyWithExtension({
      maxAge: 5
    })
  ]
})
export class AppStoreModule {
}

 

cnpm i --save reselect安裝軟件包提供一個很是有用的函數：createSelector。

做用：幫我麼把任意兩個函數組合在一塊兒造成一個有記憶，有緩存的方式。

和compose很像。

createSelector()前面n-1個參數都做爲參數傳入低n個函數。