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管理状态了。