I. Effect drawing after case operation

Second, about thengrxThe understanding of the

  • 1. Official website address
  • 2,ngrxIs the referencereduxThinking, specifically forangularA customized state management package, similarreactIn theredux,vueIn thevuex, mainly including the following modules (introduced in this article first@ngrx/store)
    • @ngrx/store
    • @ngrx/store-devtools
    • @ngrx/effects
    • @ngrx/router-store
    • @ngrx/entity
    • @ngrx/data
    • @ngrx/schematics
  • 3, need to usengrxThe scene of
    • inangularNon-essential in project development
    • Large projects require component communication and data sharing

Third, build the project

  • Initialize the project with @angular/cli

    ng new angular-ngrx
Copy the code

  • 2, Create a data module(manually change the name to AppStoreModule, otherwise it will be the same as @ngrx/store)

    ng g m store
Copy the code

  • 3. Create three folders under the Store folder

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

  • 4. Manually install @ngrx/ Store

    npm install @ngrx/store --save
Copy the code

  • 5. Install @ngrx/ store-devTools manually

    npm install @ngrx/store-devtools --save
Copy the code

  • 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 '.. /.. /.. /environments/environment';

// The state of the project
export interface State {}

// All reducer functions
export const reducers: ActionReducerMap<State> = {};

export constmetaReducers: MetaReducer<State>[] = ! environment.production ? [] : [];Copy the code

  • 7. Install the Redux plugin for your browser

  • 8. Configure browser debugging in store.module.ts for more information

    @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 { }
Copy the code

Iv. Use in the project@ngrx/store

  • 1. See the use of the codegithubIn thebookcomponent