redux-repatch 是一个轻量级的 Redux 中间件，它可以方便地支持异步数据获取，并且可以很容易地控制视图的渲染。
1. 安装
npm install --save redux-repatch
2. 基本使用
redux-repatch 是一个 Redux 中间件，你需要使用 applyMiddleware 将其和其他中间件一起使用。
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import repatchMiddleware from 'redux-repatch';
const store = createStore(
reducer,
applyMiddleware(thunk, repatchMiddleware),
);repatchMiddleware 接受一个对象作为参数，它包含了所有需要批处理的 action。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
----- ------------- - --------------------------------
----- -------------- - -
---------------- -
---- ----- --------- --------- -- -
----- -------- - ----- ----------------------------------------- -- ------------
----------
----- ----------------
-------- ---------
--
--
--
--在这个示例中，fetchUserData 是一个 Redux action，它定义了一个数据获取行为。它被添加到了 repatchActions 中，repatchActions 会在执行其他 action 的时候一起批处理。
fun 函数接受两个参数，payload 和 dispatch。payload 是 Redux action 中的载荷，dispatch 是 Redux 中的 dispatch 函数，它可以用来派发其他 action。
3. 批处理
repatchMiddleware 可以自动批处理多个 action。
const actions = [action1, action2, action3]; store.dispatch(actions);
如果你想只批处理某些 action，你可以使用 withRepatch。
import { withRepatch } from 'redux-repatch';
store.dispatch(withRepatch(actions));4. Connect 组件
repatchMiddleware 还支持 Connect 组件。你可以使用 Connect 组件直接调用 Repatch action。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ------------- - ---- ------------
----- ----------- ------- --------------- -
------------------- -
--------------------------------------------
-
-------- -
------ --------------------- -
------------ -
--------------------------------------
-
-
----- --------------- - ----- -- --
----------- -----------------
--------- ---------------
---
----- ------------------ - -------- -- --------------------
--------------
-- ----------
------ ------- ------------------------ --------------------使用 Connect 组件可以让你更加方便地控制数据的显示，同时也可以更加方便地控制数据的获取。
5. 组件未挂载
使用 repsatchMiddleware 可能会产生一个问题——当某个组件尚未挂载时，repatchActions 中的函数可能会出现错误。在这种情况下，你可以使用 withRepatch，或者在 repatchActions 中添加一个操作，这个操作返回一个 Promise 对象，它会在组件挂载之后被调用。
-- -------------------- ---- -------
----- -------------- - -
---------------- -
---- ----- --------- --------- -- -
----- -------- - ----- ----------------------------------------- -- ------------
----------
----- ----------------
-------- ---------
--
--
---------- ------- ------- -- ----------------------------------------------
--
-------- -
---- ----- --- --------- -- -
----- --- --------------- -- ------------------- ----
--
---------- ------- ------- -- -----------------------------------------------
--
--6. 结语
repatchMiddleware 是一个非常优秀的 Redux 中间件，它可以让我们更好地处理异步数据获取和视图的渲染，并且可以更好地与 Connect 组件配合使用。如果你还没有使用它，那么我强烈建议你尝试使用一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057adc81e8991b448eb64e