angular8 + redux state management

1. angular8.1.1 ----- package.json

{
  "name": "angular-demo", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~8.1.1", "@angular/common": "~8.1.1", "@angular/compiler": "~8.1.1", "@angular/core": "~8.1.1", "@angular/forms": "~8.1.1", "@angular/platform-browser": "~8.1.1", "@angular/platform-browser-dynamic": "~8.1.1", "@angular/router": "~8.1.1", "redux": "^4.0.4", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.801.1", "@angular/cli": "~8.1.1", "@angular/compiler-cli": "~8.1.1", "@angular/language-service": "~8.1.1", "@types/node": "~8.9.4", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.4.3" } }

2. Directory Structure

3. sate.js lead - out default sate

export const basketballNums = [

    {

        id: '35',

        name: "Durant" ,

        age: '30',

        position: 'forward'

    }

] 

4. action.js

action as the only channel trigger state changes, type field must, payload field pass parameters, optional on demand.

export const ADD_NUMS = 'ADD_NUMS'

export const UPDATE_NUMS = 'UPDATE_NUMS'

export const DELETE_NUMS = 'DELETE_NUMS'

export function addItems(numObj) {

    return {

        type: 'ADD_NUMS',

        payload: numObj

    }

}

5. reducer.js -- 构造以action条件（type）为依据的函数，返回 state. --即制造state

import * as basketballActions from '../actions/bascketballActions'

import { basketballNums } from '../state/basketballState'

export function basketballReducer(state = basketballNums, action) {

    switch(action.type) {

        case basketballActions.ADD_NUMS: {

            return [...state, action.payload]

        }

       

        default:

            return state

    }

}

6. index.js -- 整合所有reducer

combineReducers -- 整合整合所有reducer

createStore -- 创建store, strore是一个 observalbal 对象，提供以下方法：

• store.dispatch()
• store.subscribe()
• store.getState()

 

 

import { createStore, combineReducers } from 'redux'

import { basketballReducer } from './reducers/basketballReducers'

import { addItems } from './actions/bascketballActions'

export const allReducers = combineReducers({

    basketballState: basketballReducer

})

export const store = createStore(allReducers)

 

let unsubscribe = store.subscribe(()=>{

    console.log(store.getState())

})

store.dispatch(addItems({

    id: '0',

    name: '威少',

    position: '后卫',

    age: '30'

}))

unsubscribe()

 

7. angular组件中怎么引用？

 

import { Component } from '@angular/core';

import {store} from '../store'

import { addItems } from '../store/actions/bascketballActions'

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'angular-demo';

  constructor() {

    console.log(store, 'ss')

    store.dispatch(addItems({

            id: '11',

            name: '欧文',

            position: '后卫',

            age: '30'

        })

    )

    console.log(store.getState(), 'sss')

  }

}

以上7步， angular中就能用redux管理状态了。