Redux-thunk 中间件的使用及常见问题解决

阅读时长 7 分钟读完

Redux-thunk 是一个 Redux 的中间件,它允许我们在 Redux 的 action 中使用异步函数,并且可以在异步函数中 dispatch action。在实际的项目中,我们经常需要在 action 中进行异步操作,比如发送网络请求或者定时器等。Redux-thunk 就是为了解决这个问题而存在的。

Redux-thunk 的使用

在 Redux 中,我们通常通过 dispatch 来触发 action。Redux-thunk 的作用就是让我们可以在 action 中使用异步函数,比如发送网络请求。下面是一个使用 Redux-thunk 的示例代码:

在上面的代码中,我们先引入了 Redux-thunk,然后在创建 store 的时候,使用 applyMiddleware 来将其作为中间件传入。这样就完成了 Redux-thunk 的配置。

接下来,我们可以在 action 中使用异步函数了。例如,我们可以编写一个发送网络请求的 action:

-- -------------------- ---- -------
------ ----- ---- --------

------ ----- --------- - -- -- -
  ------ -------- -- -
    ---------- ----- -------------------- ---

    ------------------
      -------------- -- -
        ---------- ----- --------------------- -------- ------------- ---
      --
      ------------ -- -
        ---------- ----- --------------------- -------- ----- ---
      ---
  --
--

在上面的代码中,我们先 dispatch 了一个 FETCH_USER_REQUEST 的 action,表示正在发送请求。然后使用 axios 发送网络请求,如果请求成功,则 dispatch 一个 FETCH_USER_SUCCESS 的 action,否则 dispatch 一个 FETCH_USER_FAILURE 的 action。

常见问题解决

在使用 Redux-thunk 的过程中,可能会遇到一些常见问题,下面我们来一一解决。

如何在 action 中获取 state?

在 action 中获取 state,可以使用 getState 方法。例如:

-- -------------------- ---- -------
------ ----- --------- - -- -- -
  ------ ---------- --------- -- -
    ----- - ---- - - -----------

    ---------- ----- -------------------- ---

    -----------------------------
      -------------- -- -
        ---------- ----- --------------------- -------- ------------- ---
      --
      ------------ -- -
        ---------- ----- --------------------- -------- ----- ---
      ---
  --
--

在上面的代码中,我们使用 getState 方法获取了当前的 state,然后根据 state 中的 user id 发送了网络请求。

如何在 action 中使用多个异步函数?

在 action 中使用多个异步函数,可以使用 async/await 或者 Promise.all 等方法。例如:

-- -------------------- ---- -------
------ ----- ------------- - -- -- -
  ------ ----- -------- -- -
    ---------- ----- ------------------------- ---

    ----- ----------- - -------------------
    ----- ------------- - ---------------------

    --- -
      ----- -------------- --------------- - ----- ------------------------- ----------------

      ---------- ----- -------------------------- -------- - ----- ------------------ ------- ------------------- - ---
    - ----- ------- -
      ---------- ----- -------------------------- -------- ----- ---
    -
  --
--

在上面的代码中,我们使用 async/await 和 Promise.all 方法,分别发送了获取用户信息和获取订单信息的网络请求,并在请求完成后 dispatch 一个 FETCH_USER_DATA_SUCCESS 的 action。

如何在 action 中取消异步请求?

在 action 中取消异步请求,可以使用 axios 的 cancelToken。例如:

-- -------------------- ---- -------
------ ----- ---- --------

--- -------

------ ----- --------- - -- -- -
  ------ -------- -- -
    -- -------- -
      ---------
    -

    ----- ------ - ---------------------------
    ------ - --------------

    ---------- ----- -------------------- ---

    ------------------ - ------------ ------------ --
      -------------- -- -
        ---------- ----- --------------------- -------- ------------- ---
      --
      ------------ -- -
        -- ------------------------ -
          ---------- ----- --------------------- -------- ----- ---
        -
      ---
  --
--

在上面的代码中,我们使用 axios 的 CancelToken 来取消异步请求。首先,我们定义了一个 cancel 变量,用于保存 cancel 函数。然后,在每次发送请求前,先调用 cancel 函数,取消之前的请求。接着,使用 axios 的 CancelToken.source 方法创建一个 cancelToken,然后将其传入 axios 的请求配置中。在请求成功或失败后,判断是否是取消请求的错误,如果不是,则 dispatch 相应的 action。

总结

Redux-thunk 是一个非常有用的 Redux 中间件,它允许我们在 action 中使用异步函数,并且可以在异步函数中 dispatch action。在实际的项目中,我们经常需要在 action 中进行异步操作,Redux-thunk 就是为了解决这个问题而存在的。在使用 Redux-thunk 的过程中,我们还需要解决一些常见问题,比如如何在 action 中获取 state、如何在 action 中使用多个异步函数和如何在 action 中取消异步请求等。希望本文能对大家有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65e3e8031886fbafa4026ccb

纠错
反馈