异步action和redux-thunk理解

Posted ruoshuisanqian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了异步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()))

 

以上是关于异步action和redux-thunk理解的主要内容,如果未能解决你的问题,请参考以下文章

redux-thunk

Redux-thunk 异步调用和状态

redux-sage 简单理解

redux中间件和redux-thunk实现原理

redux-thunk初步使用

无法理解 Redux-thunk 中间件