zoukankan      html  css  js  c++  java
  • 异步action和redux-thunk理解

    异步action一般指的就是异步action创建函数

    action创建函数分为同步action创建函数和异步action创建函数

    同步action创建函数(最常见的):

    function requestPosts(subreddit) {
      return {
        type: REQUEST_POSTS,
        subreddit
      }
    }

    异步action创建函数(如果利用了redux-thunk,也叫thunk action创建函数,通过使用指定的 middleware,action 创建函数除了返回 action 对象外还可以返回函数。这时,这个 action 创建函数就成为了 thunk):

    // 来看一下我们写的第一个 thunk action 创建函数!
    // 虽然内部操作不同,你可以像其它 action 创建函数 一样使用它:
    // store.dispatch(fetchPosts('reactjs'))
    
    export function fetchPosts(subreddit) {
    
      // Thunk middleware 知道如何处理函数。
      // 这里把 dispatch 方法通过参数的形式传给函数,
      // 以此来让它自己也能 dispatch action。
    
      return function (dispatch) {  //redux-thunk使得可以dispatch该函数
    
        // 首次 dispatch:更新应用的 state 来通知
        // API 请求发起了。
    
        dispatch(requestPosts(subreddit))
    
        // thunk middleware 调用的函数可以有返回值,
        // 它会被当作 dispatch 方法的返回值传递。
    
        // 这个案例中,我们返回一个等待处理的 promise。
        // 这并不是 redux middleware 所必须的,但这对于我们而言很方便。
    
        return fetch(`http://www.subreddit.com/r/${subreddit}.json`)
          .then(
            response => response.json(),
            // 不要使用 catch,因为会捕获
            // 在 dispatch 和渲染中出现的任何错误,
            // 导致 'Unexpected batch number' 错误。
            // https://github.com/facebook/react/issues/6895
             error => console.log('An error occurred.', error)
          )
          .then(json =>
            // 可以多次 dispatch!
            // 这里,使用 API 请求结果来更新应用的 state。
    
            dispatch(receivePosts(subreddit, json))
          )
      }
    }

    通过使用redux-thunk中间件,使得可以dispacth一个函数,该函数被thunk中间件调用,且该函数的返回值会作为dispatch方法的返回值,该例中最后返回的是一个promise

    store.dispatch(fetchPosts('reactjs')).then(() => console.log(store.getState()))

    像 redux-thunk 或 redux-promise 这样支持异步的 middleware 都包装了 store 的 dispatch() 方法,以此来让你 dispatch 一些除了 action 以外的其他内容,例如:函数或者 Promise。 

    当 middleware 链中的最后一个 middleware 开始 dispatch action 时,这个 action 必须是一个普通对象。这是 同步式的 Redux 数据流 开始的地方(译注:这里应该是指,你可以使用任意多异步的 middleware 去做你想做的事情,但是需要使用普通对象作为最后一个被 dispatch 的 action ,来将处理流程带回同步方式)

  • 相关阅读:
    request-log-analyzer日志分析
    ubuntu下git输出的颜色变化
    vundle安装 给vim插上翅膀
    安装ruby
    【HDU1944】S-Nim-博弈论:SG函数
    【HDU1944】S-Nim-博弈论:SG函数
    我对SG函数的理解
    我对SG函数的理解
    【POJ2154】Color-Polya定理+欧拉函数
    【POJ2154】Color-Polya定理+欧拉函数
  • 原文地址:https://www.cnblogs.com/ruoshuisanqian/p/10868659.html
Copyright © 2011-2022 走看看