zoukankan      html  css  js  c++  java
  • [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());
      }

    Github

  • 相关阅读:
    django系列6--Ajax03 ajax参数
    django系列6--Ajax06 使用插件,Sweet-Alert插件
    django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件
    django系列6--Ajax04 请求设置(设置csrf_token)
    django系列6--Ajax01 特点, 基本格式, 向前端发送数据
    django系列4.2--自定义标签, 自定义过滤器, inclusion_tag, 引入静态文件(css,js等)
    面向对象之封装之如何隐藏属性, 封装的底层原理
    面向对象之------多态与多态性
    在子派生的新方法中重用父类功能的两种方式
    菱形继承
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6051473.html
Copyright © 2011-2022 走看看