NgRx Store is mainly for managing global state across an entire application. In cases where you need to manage temporary or local component state, consider using NgRx ComponentStore.

NgRx Store是為了管理整個(gè)應(yīng)用的全局狀態(tài)而設(shè)計(jì)的，如果想管理局部Component狀態(tài)或者臨時(shí)狀態(tài)，請使用NgRx ComponentStore.

Actions are the inputs and outputs of many systems in NgRx.

Actions是NgRx系統(tǒng)的輸入和輸出。

NgRx里標(biāo)準(zhǔn)的Action interface：

export interface Action {type: string; }

NgRx reducer的immutability特性

Each action handles the state transition immutably. This means that the state transitions are not modifying the original state, but are returning a new state object using the spread operator. The spread syntax copies the properties from the current state into the object, creating a new reference.

狀態(tài)遷移并不會修改原始狀態(tài)，而是借助三個(gè)點(diǎn) … 即spread操作符，返回新的state對象。Spread 操作符會從當(dāng)前state變量里拷貝屬性，生成新的對象引用。

const scoreboardReducer = createReducer(initialState,on(ScoreboardPageActions.homeScore, state => ({ ...state, home: state.home + 1 })),on(ScoreboardPageActions.awayScore, state => ({ ...state, away: state.away + 1 })),on(ScoreboardPageActions.resetScore, state => ({ home: 0, away: 0 })),on(ScoreboardPageActions.setScores, (state, { game }) => ({ home: game.home, away: game.away })) );export function reducer(state: State | undefined, action: Action) {return scoreboardReducer(state, action); }

When an action is dispatched, all registered reducers receive the action. Whether they handle the action is determined by the on functions that associate one or more actions with a given state change.

The state of your application is defined as one large object.

Registering reducer functions to manage parts of your state only defines keys with associated values in the object. To register the global Store within your application, use the StoreModule.forRoot() method with a map of key/value pairs that define your state.

The StoreModule.forRoot() registers the global providers for your application, including the Store service you inject into your components and services to dispatch actions and select pieces of state.

StoreModule.forRoot 為應(yīng)用注冊全局的服務(wù)提供者，包括注入到Component里的Store服務(wù)，以及用于dispatch actions的service以及選擇state片段的服務(wù)。

Registering states with StoreModule.forRoot() ensures that the states are defined upon application startup. In general, you register root states that always need to be available to all areas of your application immediately.

使用StoreModule.forRoot注冊的states，在應(yīng)用startup之后立即處于可用狀態(tài)。如果一個(gè)state在應(yīng)用啟動后，需要迅速被應(yīng)用各個(gè)部分使用，那么需要注冊成root state.

feature state

Feature states behave in the same way root states do, but allow you to define them with specific feature areas in your application. Your state is one large object, and feature states register additional keys and values in that object.

下面的代碼，給應(yīng)用注冊了一個(gè)空的root state：

import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store';@NgModule({imports: [StoreModule.forRoot({})], }) export class AppModule {}

feature module的注冊方法：

import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import * as fromScoreboard from './reducers/scoreboard.reducer';@NgModule({imports: [StoreModule.forFeature(fromScoreboard.scoreboardFeatureKey, fromScoreboard.reducer)], }) export class ScoreboardModule {}

只要在app.module.ts里將包含了上述feature state的module import，就能做到feature state的eager import：

import { NgModule } from '@angular/core'; import { StoreModule } from '@ngrx/store'; import { ScoreboardModule } from './scoreboard/scoreboard.module';@NgModule({imports: [StoreModule.forRoot({}),ScoreboardModule], }) export class AppModule {}

selector

Selectors are pure functions used for obtaining slices of store state.

純函數(shù)，唯一作用就是獲得store state的片段數(shù)據(jù)。

Selectors provide many features when selecting slices of state:

• Portability
• Memoization
• Composition
• Testability
• Type Safety

When using the createSelector and createFeatureSelector functions @ngrx/store keeps track of the latest arguments in which your selector function was invoked.

使用createSelector和createFeatureSelector之后，ngRx框架代碼會記錄當(dāng)我們的selector被調(diào)用時(shí)，傳入的輸入?yún)?shù)。這么做的動機(jī)是，selectors是純函數(shù)，因此相同的輸入一定會產(chǎn)生相同的輸出，所以ngRx把每次輸入以及輸出都緩存起來，如果下次調(diào)用selector的輸入在緩存里有記錄，即從緩存里返回輸出數(shù)據(jù)，以提高性能。

這種行為稱為memoization.

下圖的代碼，調(diào)用createFeatureSelector傳入一個(gè)字符串，創(chuàng)建一個(gè)feature selector：

返回類型為MemoizedSelector，即帶有記憶功能的selector.

createSelector的輸入?yún)?shù)，以及返回的類型仍然是selector:

createSelector支持傳入多達(dá)8個(gè)selector，來實(shí)現(xiàn)更復(fù)雜的取數(shù)邏輯。看個(gè)例子：

The createSelector function can take up to 8 selector functions for more complete state selections.

For example, imagine you have a selectedUser object in the state. You also have an allBooks array of book objects.
And you want to show all books for the current user.

import { createSelector } from '@ngrx/store';export interface User {id: number;name: string; }export interface Book {id: number;userId: number;name: string; }export interface AppState {selectedUser: User;allBooks: Book[]; }export const selectUser = (state: AppState) => state.selectedUser; export const selectAllBooks = (state: AppState) => state.allBooks;export const selectVisibleBooks = createSelector(selectUser,selectAllBooks,(selectedUser: User, allBooks: Book[]) => {if (selectedUser && allBooks) {return allBooks.filter((book: Book) => book.userId === selectedUser.id);} else {return allBooks;}} );

The createFeatureSelector is a convenience method for returning a top level feature state. It returns a typed selector function for a feature slice of state.

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的NgRx Store里的StoreModule.forRoot()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。