zoukankan      html  css  js  c++  java
  • Redux学习笔记-中间件与异步操作

    参考:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

    • 中间件概念
      中间件是一个函数,对store.dispatch方法进行了改造,在发出 Action 和执行 Reducer 这两步之间,添加了其他功能,使得能 Reducer 在异步操作结束后自动执行。
    • 常见中间件的用法
      • redux-logger
        import { applyMiddleware, createStore } from 'redux';
        import createLogger from 'redux-logger';
        const logger = createLogger();
        
        const store = createStore(
          reducer,
          applyMiddleware(logger)
        );

        上面代码中,redux-logger提供一个生成器createLogger,可以生成日志中间件logger。然后,将它放在applyMiddleware方法之中,传入createStore方法,就完成了store.dispatch()的功能增强。

      • redux-thunk
        store.dispatch方法正常情况下,参数只能是对象,不能是函数。
        import { createStore, applyMiddleware } from 'redux';
        import thunk from 'redux-thunk';
        import reducer from './reducers';
        
        // Note: this API requires redux@>=3.1.0
        const store = createStore(
          reducer,
          applyMiddleware(thunk)
        );

        上面代码使用redux-thunk中间件,改造store.dispatch,使得后者可以接受函数作为参数。

        因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用redux-thunk中间件改造store.dispatch

      • redux-promise
        import { createStore, applyMiddleware } from 'redux';
        import promiseMiddleware from 'redux-promise';
        import reducer from './reducers';
        
        const store = createStore(
          reducer,
          applyMiddleware(promiseMiddleware)
        ); 

        这个中间件使得store.dispatch方法可以接受 Promise 对象作为参数。

    • redux-applyMiddleware()
      它是 Redux 的原生方法,作用是将所有中间件组成一个数组,依次执行。下面是它的源码。
      export default function applyMiddleware(...middlewares) {
        return (createStore) => (reducer, preloadedState, enhancer) => {
          var store = createStore(reducer, preloadedState, enhancer);
          var dispatch = store.dispatch;
          var chain = [];
      
          var middlewareAPI = {
            getState: store.getState,
            dispatch: (action) => dispatch(action)
          };
          chain = middlewares.map(middleware => middleware(middlewareAPI));
          dispatch = compose(...chain)(store.dispatch);
      
          return {...store, dispatch}
        }
      }
  • 相关阅读:
    Excel 利用VBA 发邮件
    SharePoint 2010 Ribbon Locations
    Sharepoint Query List Item Using CAML(folder)
    Customize SharePoint Ribbon Using ECMA Javascript
    Sharepoint学习笔记—ECMAScript对象模型--实现编写代码时的智能提示功能
    Javascript client sharepoint object model -- ECMA
    利用VBA拆分Word每个页面并分别保存
    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback
    javascript倒计时 页面跳转
    微信小程序入门到实战(三)
  • 原文地址:https://www.cnblogs.com/dadouF4/p/10535980.html
Copyright © 2011-2022 走看看