redux实现单页应用状态管理（1）

在单页应用中，组件之间相互传值是比较繁琐的，特别是当项目越来越复杂，功能越来越多，对于组件通信变得尤为苦恼。

redux使得有了一个全局的状态管理仓库，能够实现仓库store到组件component之间的通信，避免了繁琐的组件通信。Vuex其实就是Vue的一个专门的状态管理容器。

redux

安装redux：

在项目目录下，执行cmd：

npm i redux --save

redux-thunk安装中间件：

npm i redux-thunk --save

thunk其实就是对dispatch函数的增强，使得可以在dispatch中执行异步逻辑，因为reducer函数必须是纯函数。

创建reducer函数，导出一个有state和action作为参数的函数即可。

/* 预先定义一个全局状态对象 */
const globalState={
    'description':'Angular是完整的MVC框架!'
};
/** 
 @description reducer函数，依据action进行相应的state计算操作
 @param { state } 原有的state
 @param { action} 具有type和value属性的JS对象
*/
function reducer(state:any=globalState,action:{'type':any,'value':any}){
    /* 深度拷贝state，因为redux规定不能直接修改state，而是计算出新的state */
    const newState=JSON.parse(JSON.stringify(state));
    return newState;
}
/* 导出reducer函数 */
export {
   reducer
}

导入redux的createStore函数，导入thunk，用于创建仓库。传入两个参数，第一个是reducer函数，第二个是中间件applyMiddleWare(thunk)。

执行createStore(reducer,thunk)，得到仓库对象store。

const store=createStore(reducer,thunk)；

导入store即可。

/* 导入thunk中间件 */
import thunk from 'redux-thunk';
/* 导入reducer函数 */
import { reducer } from './reducer';
/* 导入redux中的函数，建立store和安装中间件 */
import { createStore,applyMiddleware } from 'redux';
/* 获取store对象 */
const store=createStore(reducer,applyMiddleware(thunk));
/* 导出store，方便组件调用 */
export default store;

这里以在angular中使用redux为例：

import { Component,AfterContentInit } from '@angular/core';
import store from 'src/store';

@Component({
  selector: 'app-root',
  templateUrl: './road.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {

  title = '我的Angular App';
  /* store对象的getState函数返回reducer计算出的state */
  data:string=store.getState().description;
  /* angular生命周期钩子：组件指令全部执行完毕后执行，查看是否取得store中的数据 */
  ngAfterContentInit(): void {
    console.log(this.data);
  }

}

控制台效果图：