zoukankan      html  css  js  c++  java
  • [AngularJS NG-redux] Handle Asynchronous Operations with Middleware

    Invariably the question that comes up when talking about Redux is how does one handle asynchronous operations in redux. For instance, how do we hand off an operation to redux that requires a remote call to the server? Where exactly does the async part get handled?

    Redux has this concept of middleware that allows us to insert custom logic in the space between dispatching an action, and the moment it reaches the reducer. In this lesson, we are going to set up a few async operations and then use redux thunk middleware to make sure that everything makes it into the reducer properly.

    The main key to thunk middleware is that it allows us to return a function instead of an action. This function can encapsulate the async operation and dispatches the appropriate action when the operation is completed.

    To handle async opreations, we can install:

    npm install --save redux-thunk

    Import:

    import thunk from 'redux-thunk';

    Use it as middle ware:

    const config = $ngReduxProvider => {
      'ngInject';
      $ngReduxProvider.createStoreWith(rootReducers, [thunk]);
    };

    Refactor action creator to use thunk middleware:

    export const CategoriesActions = ($http, $q) => {
      'ngInject';
      const FETCH = {
        categories: 'data/categories.json'
      };
    
      /*const getCategoreis = (categories) => {
       return {type: GET_CATEGORIES, payload: categories}
       };*/
    
      const getCategoreis = () => {
        return (dispatch, getState) => {
          const { categories } = getState();
          if (categories.length > 0) {
            return $q.when(categories);
          } else {
            return $http.get(FETCH.categories)
              .then(res => res.data)
              .then((payload) => {
                return dispatch({
                  type: GET_CATEGORIES,
                  payload
                })
              });
          }
        };
      };
    
    ....
    }

    Here we use cache, so we need to set initial value to empty array:

    export const categories = (state = [], { type, payload }) => {
      switch (type) {
        case GET_CATEGORIES:
          return payload || state;
        default:
          return state;
      }
    };
  • 相关阅读:
    课程作业02
    课后作业01
    大道至简第一章伪代码
    《大道至简》读后感
    Codeforces 959 F. Mahmoud and Ehab and yet another xor task
    Codeforces 992 E. Nastya and King-Shamans
    Codeforces 835 F. Roads in the Kingdom
    Codeforces 980 D. Perfect Groups
    洛谷 P4315 月下“毛景树”
    JDOJ 1234: VIJOS-P1052 高斯消元
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6063339.html
Copyright © 2011-2022 走看看