Procedure for Angular8 and NGRX8


Second, about NGRX

1, official website address

2, NGRX is a reference to REDUX thinking, specifically managing a state-managed package customized in Angular, similar to REDUX, VueX in React, mainly including the following Module (this article first introduces @ ngrx / store)

@ ngrx / store

    @ ngrx / store-devtools
  • @ ngrx / effects
  • @ NGRX / Router-Store
  • @ NGRX / Entity
  • @ NGRX / DATA
  • @ ngrx / schematics
  • 3, need to use NGRX Scene

    in Angular Project Development, component communication, data sharing
  • three , Build project

NG New Angular-NGRX
   2, create a data of the module (manually modified the name is appstoremodule, otherwise the rename in the @ NGRX / Store) 

NG GM Store
 3, create three folders under the STORE folder   

Selectors (non-must, just for 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, create index.ts under the Reducers folder (using NG Add @ NGRX / Store will be generated by default)

Import {ActionreducerMap, MetaReducer} from ‘@ ngrx / store’; import {environment} from ‘../../20vironments/ENVIRONMENT’A; // project all state export interface stats {} // All reducer function export const reducermap = {}; export const metaraducer: metaraducer
 [] =! Environment.Production? []: [];   
7. BrowserInstall Redux plug-in

8, more configuration of browser debugging in Store.Module.TS

   @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 @ ngrx / store

in the project 1, the use of the code is shown in Github Book Components


The above is the full content of this article, I hope this article is to study or work on everyone. Have a certain reference to learning value, thank you for your support of Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment