简介
redux-phunk 是一个用于 redux 中间件的 npm 包，可以让我们在 redux 中使用异步操作，其底层是对 redux-thunk 的封装。
在实际开发中，我们经常会使用 redux 来管理应用的状态，然而 redux 自身并不支持异步操作，而 redux-phunk 就解决了这个问题。
安装
npm install redux-phunk --save
使用
引入 redux-phunk 中间件：
import { createStore, applyMiddleware } from "redux"; import phunk from "redux-phunk"; const store = createStore(reducer, applyMiddleware(phunk));创建 action：
-- -------------------- ---- ------- ----- --------- - -- -- - ------ ---------- -- - ---------- ----- --------------- --- ------------------ ------------ -- ------------ ------------ -- ---------- ----- ---------------- -------- ---- --- -------------- -- ---------- ----- -------------- -------- ----- ---- -- --在组件中 dispatch action：
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ - --------- - ---- ------------ ----- ----------- ------- --------------- - ------------------- - ----------------------- - -------- - -- --- - - ----- ------------------ - - --------- -- ------ ------- ------------- ---------------------------------
示例代码
这里提供一个完整的示例代码，使用了 react、redux、react-redux、redux-phunk：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ - --------- ------- - ---- --------------
------ ----- ---- --------------
-- --- -----
----- --------- - - ---------- ------ ------ ----- ----- ---- --
-- -------
----- ------- - ------ - ---------- ------- -- -
------ ------------- -
---- ----------------
------ - ---------- ----- ------ ----- ----- ---- --
---- ----------------
------ - ---------- ------ ------ ----- ----- -------------- --
---- --------------
------ - ---------- ------ ------ --------------- ----- ---- --
--------
------ ------
-
--
-- -- ------
----- --------- - -- -- -
------ ---------- -- -
---------- ----- --------------- ---
------------------
------------ -- ------------
------------ -- ---------- ----- ---------------- -------- ---- ---
-------------- -- ---------- ----- -------------- -------- ----- ----
--
--
-- --
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
----- - ---------- ------ ---- - - -----------
-- ----------- ------ ----------------------
-- ------- ------ ----------- ----------------------
------ ---------- -------------
-
-
-- ----- -----
----- --------------- - ------- -- --
---------- ----------------
------ ------------
----- -----------
---
----- ------------------ - - --------- --
----- -------------------- - --------
----------------
------------------
---------------
-- -- -----
----- ----- - -------------------- ------------------------
-- ----
----------------
--------- --------------
--------------------- --
------------
-------------------------------
--总结
redux-phunk 这个 npm 包可以让我们在 redux 中使用异步操作，从而更好地管理应用状态，提升用户体验。在实际使用中，我们需要注意 action 和 reducer 的编写，以及在组件中使用 connect 高阶组件连接 store 和组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cda