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. 目錄結構

3. sate.js 匯出default sate

export const basketballNums = [     {         id: '35',         name: "杜蘭特",         age: '30',         position: '前鋒'     } ] 

4. action.js

action作為觸發state 改變的唯一通道，type欄位必須，payload欄位傳遞引數，按需求可選。

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管理狀態了。

&n