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());
}

Github

[AngularJS Ng-redux] Integrate ngRedux的更多相关文章

  1. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  2. part 4 AngularJS ng src directive

  3. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  4. [AngularJS] AngularJS系列(1) 基础篇

    目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...

  5. 从angularJS看MVVM

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...

  6. angularJS看MVVM

    从angularJS看MVVM   javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到a ...

  7. js架构设计模式——从angularJS看MVVM

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...

  8. .Net Core应用框架Util介绍(一)

    距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...

  9. gulp 在 angular 项目中的使用

    gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...

随机推荐

  1. LuoguP2763 试题库问题(最大流)

    建图同_____ 代码: #include<queue> #include<cstdio> #include<cstring> #include<algori ...

  2. kali之Nmap (Network Mapper(网络映射器)

    Nmap是主机扫描工具,他的图形化界面是Zenmap,分布式框架为Dnamp. Nmap可以完成以下任务: 主机探测 端口扫描 版本检测 系统检测 支持探测脚本的编写 Nmap在实际中应用场合如下: ...

  3. apache wicket 7.X之HelloWorld

    Wicket是什么 Wicket一个开发Java Web应用程序框架. 它使得开发web应用程序变得easy而轻松. Wicket利用一个POJO data beans组件使得它能够与不论什么持久层技 ...

  4. actionBar-进入界面闪烁问题解决

    问题分析: 主要是因为在开启一个应用的时候,当前界面并不是第一界面,在它之前,还有一个界面启动了,这个界面的唯一目的就是启动主界面,它目的不是显示.虽然如此,但是呢,这个界面的theme因为没有做统一 ...

  5. MFC中对话框的各种消息触发时间

    小结:WM_CREATE是所有窗口都能响应的消息,表明本窗口已经创建完毕.可以安全的使用这个窗口了,例如在它上面画控件等等.这个状态肯定是在调用ShowWindows()显示窗口之前.WM_WM_IN ...

  6. 关于Promise详解

    异步回调 回调地狱 在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱 并行结果 如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务 ...

  7. codeforces 1037E. Trips(倒叙)

    题目传送门: 解题思路: 正着搞好像有点恶心. 反着搞. 一边删一边搞,从崩坏的地方开始,入度--. 最后dfs崩坏,更新答案. 注意要把边删掉防止重复崩坏. 代码: #include<cstd ...

  8. 3.字符设备驱动------Poll机制

    1.poll情景描述 以之前的按键驱动为例进行说明,用阻塞的方式打开按键驱动文件/dev/buttons,应用程序使用read()函数来读取按键的键值. ) { read(fd, &key_v ...

  9. SVN和Git代码管理小结

    SVN和Git代码管理小结  之前,先用的是SVN,后来用了Git,最近又在用SVN.  关于代码管理,写几句.    由于自己参与的项目,人通常不超过10个人,版本不是很多,协作比较正常,感觉SVN ...

  10. 51NOD——T 1079 中国剩余定理

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1079 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难 ...