angular8 + redux 管理状态

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

原文地址:https://www.cnblogs.com/monkey-K/p/11442947.html

时间: 2024-10-08 06:38:54

angular8 + redux 管理状态的相关文章

react中使用redux管理状态流程

1.在项目中安装redux插件 npm install redux -S 2.针对单独的view组件定义store状态存储对象,参数为对状态的更新操作函数 import { createStore } from 'redux'; const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state > 0

Redux管理你的React应用

使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ,我会在这里进行持续的更新和纠错. React是最好的前端库,因为其发源于世界上最好的后端语言框架. ---信仰 4.0 will likely be the last major release. Use Redux

使用Redux管理你的React应用

React是最好的前端库,因为其发源于世界上最好的后端语言框架. ---信仰 4.0 will likely be the last major release. Use Redux instead. It's really great. —Flummox框架作者 acdliteAndrew Clark 为什么使用React还需要使用别的框架来搭配? React的核心是使用组件定义界面的表现,是一个View层的前端库,那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间,组件与数

vuex 管理状态

来分析下vuex的管理状态吧,如果你用过react中的redux的管理树,那我觉得vuex对你来说很容易掌握 如果你还是不太熟悉vuex是什么,那先看下官网https://vuex.vuejs.org/zh-cn/intro.html, 看下这张图: 下面就举个例子会比较容易理解: 就拿vue的分页组件来理解吧 1. 创建 pagination.vue 文件. <template> <div class="page-wrap"> <ul v-show=&q

iOS开发——修改指定文件的内存管理状态

今天项目要上线,在Archive时报错:  ARC forbids explicit message send of 'release' 'release' is unavailable: not available in automatic reference counting mode   项目中有几个第三方库用到MRC,在release时报错.在运行时没有用到这个库所以没有报错(没有确定).于是我改了那几个文件为MRC状态,成功Archive,在ARC改为-fobjc-arc,MRC为-f

【react】 redux 公共状态管理---数据的渲染,数据的修改,再把修改的数据渲染到当前组件

首先需要明白,redux中有方法,这些方法是封装好的 dispatch 方法是根据动作做派发的过程getState 方法是返回当前store中的state的数据subscribe 方法是事件订阅,参是一个函数,它有一个数值专门存放函数,当执行对应的事件函数,就会遍历触发该数组中的函数 1.store中的state数据渲染到当前组件 2.对store中的state的数据进行修改 在当前组件,触发,当前组件引入的store文件中的dispatch(派发器,根据传入的动作做不的行为事件),reduce

Redux 管理React Native数据

现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store. Store 接收 Action 的数据并将其连同当前的 state 树(state 树是包含所有 state 的一种特殊的数据结构,是一个单一的对象)发给 Reducer. Reducer 是一个多个函数的合成函数(当然一般都是),它接收一个之前的 state 和一个 Action:并基于此 A

在使用自定义指令的时候,使用了一个引用传递的值来管理状态

就是在外部的控制器里面定义了一个变量,然后把它传给自定义组件.在自定义组件里面修改了.因为是引用传递.按道理组件里面改了,外面也会改.也会响应的是吧.但是我遇到的一个问题是.我在指令里面改了这个变量.然后在指令里面立马调用了外部控制器里面的方法此时变量的更改没有反应到外部控制器.出现了延时的状况.这时候我用$timeout为0就能解决.然后就能同步.这个坑其实我也不知道什么原因.可能和他angular里面的机制有关系吧.

(十六)硅谷外卖-使用 vuex 管理状态

一.下载vuex npm install --save vuex 二.定义state store/state.js export default { latitude: 40.10038, // 纬度 longitude: 116.36867, // 经度 address: {}, // 地址信息对象 categorys: [], // 分类数组 shops: [], } 三.定义mutation-types store/mutation-types.js export const RECEIV