Basic steps of using angular8 and ngrx8

1. The effect picture after the case is running

Second, ngrxthe knowledge about

• 1. Official website address
• 2. It ngrxis reduxa thinking for reference , angulara state management package customized for China, similar to the reactmiddle reduxand the vuemiddle vuex, mainly including the following modules (this article introduces first @ngrx/store)
  • @ngrx/store
  • @ngrx/store-devtools
  • @ngrx/effects
  • @ngrx/router-store
  • @ngrx/entity
  • @ngrx/data
  • @ngrx/schematics
• 3. ngrxThe scene that needs to be used
  • angularNot necessary in project development
  • Component communication and data sharing are required in large projects

Three, build the project

• 1. Use the @angular/cliinitialization project

  ng new angular-ngrx
  

• 2. Create a data module(manually modify the name AppStoreModule, otherwise it will @ngrx/storehave the same name as in)

  ng g m store
  

• 3. storeCreate three folders under the folder

  • actions
  • reducers
  • selectors(Not necessary, only when a state tree is an object, write a method to select a node in the state tree)

• 4. Manual installation@ngrx/store

  npm install @ngrx/store --save
  

• 5. Manual installation@ngrx/store-devtools

  npm install @ngrx/store-devtools --save
  

• 6, reducerscreate under the folder index.ts(use ng add @ngrx/storewill be generated by default)

  import {
    ActionReducerMap,
    MetaReducer
  } from '@ngrx/store';
  import { environment } from '../../../environments/environment';
  
  // 项目中全部的状态
  export interface State {}
  
  // 全部的reducer函数
  export const reducers: ActionReducerMap<State> = {};
  
  export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];
  

• 7. The browser needs to install reduxplug-ins

• 8. For more configurationstore.module.ts of configuring browser debugging in

  @NgModule({
    declarations: [],
    imports: [
      StoreModule.forRoot(reducers, {
        metaReducers,
        runtimeChecks: {
          strictStateImmutability: true,
          strictActionImmutability: true,
          strictStateSerializability: true,
          strictActionSerializability: true,
        }
      }),
      StoreDevtoolsModule.instrument({
        maxAge: 20,
        logOnly: environment.production
      })
    ]
  })
  export class AppStoreModule { }
  

Four, use in the project@ngrx/store

• 1. For the use of code, see the components in githubbook