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

  • 相关阅读:
    BUG漏测的原因总结,以及如何处理
    费用流
    拉格朗日插值
    数论问题整理
    计数问题
    POJ 1741 Tree
    bzoj 2820: YY的GCD
    luogu P3690 【模板】Link Cut Tree (动态树)
    bzoj 1036: [ZJOI2008]树的统计Count
    bzoj 3282: Tree
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6051473.html
Copyright © 2011-2022 走看看