什么是 redux-withdata？
redux-withdata 是一个基于 Redux 的状态管理库，它可以帮助我们实现将数据和逻辑分离的目的，让组件更专注于 UI 的渲染。
redux-withdata 的使用方法
安装和引入
redux-withdata 是一个 npm 包，我们可以通过 npm 或者 yarn 安装：
npm install redux-withdata --save
或
yarn add redux-withdata
安装完成后，我们需要在项目中引入它：
import { withData } from 'redux-withData';创建一个 withData
使用 withData 首先需要创建一个 withData 对象，我们可以使用 withData 方法进行创建：
const withData = withData(defaultData, actionTypes);
- defaultData: 用来初始化数据的对象，这个对象的属性可以直接在整个应用程序中访问。
- actionTypes: actionCreators 的 Map。对于与 withData 相关的 action，我们需要统一放在这个 actionTypes 对象中来管理，并在请求数据的时候相应地 dispatch。
我们可以在项目的入口文件中创建一个 withData：
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- ----- ----------- - - ----- --- ------ -- --------- --- -------- -- - ----- ----------- - - -------- --------- -- -- ----- ---------- ------- --- -- ----- ----------- - --------------------- ------------------
使用 withData
我们把带有数据逻辑的组件 App 包裹在 AppWithData 中，这样 App 就可以通过 props 获取到数据统一存储在 withData 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- -----------------
----- ----------- - -
----- ---
------ --
--------- ---
-------- --
-
----- ----------- - -
-------- --------- -- -- ----- ---------- ------- ---
--
----- ----------- - --------------------- ------------------
----- --------------- - ------- -- -
------ -
----- ---------------
-
-
----- ------------------ - ---------- -- -
------ -
-------- -------- -- -
--------------------------------------
--
-
-
----- --- ------- --------------- -
-------- -
----- - ----- ------- - - -----------
------ -
-----
----
-
-------------------- -- -
--- ------------------------------
--
-
-----
------- ----------- -- --------- ----- - -------------------
------
-
-
-
------ ------- ------------------------ ---------------------------------在上面的例子中，我们通过 mapStateToProps 和 mapDispatchToProps 把 withData 的数据和 actionCreators 分发给 App，然后 App 就可以获取数据并且调用 actionCreators 来改变数据。
调用 API 获取数据
当我们从服务器获取数据时，我们可以在自定义的 actionCreators 中请求服务器数据并且通过 dispatch 改变数据。
const actionTypes = {
getUser: (payload) => async (dispatch, getState) => {
const { page } = payload;
const res = await API.getUserList({ page, pageSize: getState().withData.pageSize });
dispatch({ type: 'getUser', payload: res });
},
};在 actionCreators 中我们使用 async/await 获取服务器数据，并且通过 dispatch 改变 withData 中的 list 数据。
总结
以上就是 redux-withdata 的使用教程。通过使用 redux-withdata，我们可以更方便地分离数据和逻辑，让组件更专注于 UI 的渲染，提高代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8ce6