angular8 + redux 管理状态
2024-08-24 06:20:09
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管理状态了。
最新文章
- java位操作总结
- 前后台数据交互 后台封装数据 json格式
- GROUP与HAVING的使用
- Java 控制线程
- 1215课后练习----indexOf的用法
- android 使用静态变量传递数据
- 分析函数(Analytic Functions)
- 各种less开发工具
- Java中反射的三种常用方式
- javascript 的 split用法
- 0xc000000f: Error attempting to read the boot configuration data
- 利用ASP.NET AJAX的Timer讓GridView每隔一段時間做到自動換頁的功能
- jquery点击按钮显示和隐藏DIv
- java中json数据生成和解析(复杂对象演示)
- Qt For Android 开发环境配置
- Jenkins 无法捕获构建脚本错误问题
- node(http, url)
- Java知多少(87)选择框和单选按钮
- JS模拟PHP的sleep
- bzoj2134 错选单位
热门文章
- VS Code 安装 LeetCode 插件
- 用wxpy管理微信公众号,并利用微信获取自己的开源数据。
- PHP7安装mysql扩展
- 关于python中的特殊方法
- 基于 Autojs 的 APP、小程序自动化测试 SDK - 2019年8月3日
- 使用Minifly打造基于视觉感知的跟踪无人机
- Java集合系列(四):HashMap、Hashtable、LinkedHashMap、TreeMap的使用方法及区别
- Linux(Ubuntu)安装Swift和Swiftlint
- Letters Shop
- jdk1.8 HashMap底层数据结构:深入解析为什么jdk1.8 HashMap的容量一定要是2的n次幂