[AngularJS NG-redux] Handle Asynchronous Operations with Middleware

发布时间:2017-2-20 9:47:00 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"[AngularJS NG-redux] Handle Asynchronous Operations with Middleware ",主要涉及到[AngularJS NG-redux] Handle Asynchronous Operations with Middleware 方面的内容,对于[AngularJS NG-redux] Handle Asynchronous Operations with Middleware 感兴趣的同学可以参考一下。

[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

上一篇:手机端点解链接有外框的问题
下一篇:Animator Controller 继承关系

相关文章

相关评论