简介
redux-source-connect 是一个基于 Redux 的数据获取库，主要用于将数据源与 Redux store 进行连接，从而方便地在 React 组件中获取数据。本文将会介绍 redux-source-connect 的基本使用方法，并且提供一些示例代码来帮助读者更好地理解。
安装
安装 redux-source-connect 的命令如下：
npm install --save redux-source-connect
使用方法
首先需要在 store 中添加 reducer 和 middleware，如下所示：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ------- -- -------------- ---------- -- ---------------- - ---- ----------------------- ----- ----------- - ----------------- -- -- ---------- ------- -------------- --- ----- ----- - ------------ ------------ ---------------------------------- --
接下来，在组件中使用 connectSource 来连接数据源和 store。connectSource 接受一个数据源的函数作为参数，这个函数需要返回一个 Promise 对象，其中包含需要获取的数据对象。示例代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- -----------------------
----- --------- - ------- -- -
------ ----------------------------
-------------- -- ----------------
---------- -- -- ---- ----
--
----- ---------------- ------- --------------- -
-------- -
------ -
-----
--- ---- ---
------
--
-
-
------ ------- -------------------------------------------这个示例中，connectSource 函数返回了一个高阶组件，这个高阶组件会将 data 对象作为组件的 props 传入。如果需要传递其他参数给 fetchData 函数，可以在 connectSource 函数调用时传递。示例代码如下所示：
export default connectSource((props, state) => {
return fetchData({
id: props.id,
token: state.token,
});
})(ExampleComponent);高级用法
手动刷新数据
默认情况下，当组件挂载时会自动获取一次数据，并在接下来的路由变化中自动更新数据。如果需要手动刷新数据，可以使用 refreshSource 函数。示例代码如下所示：
-- -------------------- ---- -------
----- ---------------- ------- --------------- -
----------- - -- -- -
---------------------------
--
-------- -
------ -
-----
------- ----------------------------------------
--- ---- ---
------
--
-
-
------ ------- -------------------------------------------连接多个数据源
如果需要连接多个数据源，可以使用 composeSources 函数来组合不同的数据源函数。示例代码如下所示：
-- -------------------- ---- ------- ----- ---------- - ------- -- - -- --- -- ----- ---------- - ------- -- - -- --- -- ------ ------- ----------------------------- ----------- ----------- ---------------------
结语
本文介绍了 redux-source-connect 的基本使用方法，包括安装、连接数据源、手动刷新数据和连接多个数据源等等。希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8bc3