[AngularJS Ng-redux] Integrate ngRedux
Up to this point, we have created an effective, yet rudimentary, implementation of Redux by manually creating an application store, reducers and action creators. We have already made significant progress in simplifying state management within our application, but we have in fact only touched the surface of what Redux has to offer.
In this lesson, we are going to introduce ngRedux into our application and let it handle the rest of the heavy lifting as we work through this series. ngRedux is a project that provides angular bindings to redux to streamline integrating it into our application.
Install:
npm install --save redux ng-redux
Config:
import {categories, initialCategories, CategoriesActions} from './components/categories/category.state';
// import Store from './app.store';
import ngRedux from 'ng-redux';
//const store = new Store(categories, initialCategories);
const config = $ngReduxProvider => {
'ngInject';
// createStoreWith(1p, 2p, 3p, 4p)
//1p: reducer
//2P: middleware
//3p: enhancer
//4p: initial state
$ngReduxProvider.createStoreWith(categories, [], [], initialCategories);
};
Previosuly, we use the stroe class we created, now we replace with ng-redux.
Using:
constructor($timeout, CategoriesActions, $ngRedux) {
'ngInject'; angular.extend(this, {
$timeout,
CategoriesActions
}); this.store = $ngRedux;
}
In the controller, we can inject '$ngRedux' and assign it to stroe.
Then we can use it as the same before.
$onInit() {
this.unsubscribe = this.store.subscribe(() => {
this.categories = this.store.getState();
}); this.store.dispatch(this.CategoriesActions.getCategoreis()); this.$timeout(( )=> {
const data = [
{id: 0, name: 'Angular'}
];
this.store.dispatch(this.CategoriesActions.getCategoreis(data));
}, 2000);
}
More than often we need to deal with multi reducers in our app. So we need to combine those reducers to make it easy to use.
Import:
import { categories, initialCategories, CategoriesActions, category } from './components/categories/category.state';
import { combineReducers } from 'redux';
const rootReducers = combineReducers({
categories,
category
});
Then we can pass the 'rootReducer' to createStoreWith() function:
const config = $ngReduxProvider => {
'ngInject';
$ngReduxProvider.createStoreWith(rootReducers, []);
};
Now it affects how to getState() function used, now the function return our an object which container both 'categories' and 'category' state.
$onInit() {
this.unsubscribe = this.store.subscribe(() => {
this.categories = this.store.getState().categories;
this.currentCategory = this.store.getState().category;
}); this.store.dispatch(this.CategoriesActions.getCategoreis());
}
最新文章
- Java线程基础实例
- CVEH项目观察与思考
- Effective c++ 小结
- TC srm 673 300 div1
- 中国大概能用的NTPserver地址
- hdu3681--Prison Break(TSP+二分)
- ubuntu下ffmpeg的安装,实现支持3gpp等转换
- Android自定义控件系列之应用篇——圆形进度条
- 详解session
- Android开发技巧——ViewPager衍生出来的2个类
- continue #结束本次循环,继续下一次代码
- ADO.Net操作数据库的方式
- 用python一起来看流星雨
- MySql使用笔记
- 最小生成树问题(prim算法)POJ-1258 Agri-Net
- vue 打印页面部分区域
- spring---aop(1)---AOP概念
- IOC和AOP的个人理解
- Writing a Discard Server 写个抛弃服务器 世上最简单的协议
- Nginx源码完全注释(8)ngx_errno.c