前置知识
在使用 symbiote-fetching 之前，需要了解以下技术和知识：
- 前端开发基础知识，包括 HTML、CSS 和 JavaScript。
- React 框架的使用经验。
- Redux 状态管理框架的使用经验。
- 异步操作的概念和处理方式。
什么是 symbiote-fetching
symbiote-fetching 是一个用于处理异步请求的 npm 包。它提供了一种声明式方式来处理异步操作，将请求和响应状态与 Redux store 状态管理结合起来，简化了复杂的异步流程控制。
安装
要使用 symbiote-fetching，首先需要在项目中安装该包。使用 npm 可以轻松完成安装：
npm install symbiote-fetching --save
快速上手
添加 reducers
使用 symbiote-fetching 时，需要在 Redux store 中添加 reducers。Symbiote-fetching 提供了一个 fetchReducers 工具函数来处理所有的请求和响应状态。
import { combineReducers } from 'redux';
import { fetchReducers } from 'symbiote-fetching';
const rootReducer = combineReducers({
...fetchReducers,
// 自定义reducers
...
});添加这些 reducers 可以在 Redux store 中建立一个新的 state 分支，该分支用于存储所有由 symbiote-fetching 处理的请求和响应状态。
创建请求函数
使用 symbiote-fetching，需要先创建一个请求函数。该函数需要使用特定的参数形式，并返回一个 Promise 对象。
const getUserInfo = ({ userId }) => ({
type: 'GET_USER_INFO',
api: {
path: `/users/${userId}`,
method: 'GET',
},
});上面的请求函数使用了 ES6 的解构语法，从参数中提取了 userId 并将其用于构造请求路径。请求函数使用了一个 api 对象来配置请求，包括请求路径和请求方法。
调用请求函数
调用请求函数是发送请求的关键步骤，它可以使用 React 组件或其他代码中的 dispatch 函数进行调用。
import { useDispatch } from 'react-redux';
import { getUserInfo } from './actions';
const userId = 123;
const dispatch = useDispatch();
dispatch(getUserInfo({ userId }));在发送请求之后，symbiote-fetching 将自动处理所有的异步操作，并将所有的请求和响应状态存储在 Redux store 中。在应用程序中，可以通过 Redux store 中的 fetch 状态分支来查看请求和响应状态。
响应处理
处理响应状态是应用程序的重要部分。在 reducer 中，symbiote-fetching 已经为所有请求类型（例如 GET、POST、PUT 和 DELETE）添加了默认的状态机，开发者可以直接使用这些默认状态。当响应状态发生变化时，Redux store 将触发一个 FETCH_SUCCESS 或 FETCH_FAILURE 的 action。可以使用 redux-thunk 或 redux-saga 等 middleware 来响应这些 action。
-- -------------------- ---- -------
----- ----------- - -- ------ -- -- --
----- ----------------
---- -
----- -------------------
------- ------
--
-------- -- -------- -- -- -
---------- ----- ------------------- ---
--
---------- -- --------- ------ -- -- -
---------- ----- ------------------- -------- ------ ---
--
---------- -- --------- ----- -- -- -
---------- ----- ------------------------- -------- ----- ---
--
---在请求函数中，可以使用 onFetch、onSuccess 和 onFailure 函数来处理请求状态变化。例如，在上面的示例中，当请求开始时，将触发一个 LOADING_USER_INFO 的 action，在请求成功时，将触发一个 USER_INFO_LOADED 的 action，在请求失败时，将触发一个 USER_INFO_LOAD_FAILURE 的 action。
示例代码
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - -------------- --------------- - ---- -------------------- ----- ----------- - ----------------- ----------------- -- ----------- --- ------ ------- ------------ ------ ----- ----------- - ------------------
import { useDispatch } from 'react-redux';
import { getUserInfo } from './actions';
const userId = 123;
const dispatch = useDispatch();
dispatch(getUserInfo({ userId }));-- -------------------- ---- -------
----- ----------- - -- ------ -- -- --
----- ----------------
---- -
----- -------------------
------- ------
--
-------- -- -------- -- -- -
---------- ----- ------------------- ---
--
---------- -- --------- ------ -- -- -
---------- ----- ------------------- -------- ------ ---
--
---------- -- --------- ----- -- -- -
---------- ----- ------------------------- -------- ----- ---
--
---总结
使用 symbiote-fetching 可以在 React 和 Redux 应用程序中简化异步流程控制。使用声明式的请求函数和钩子，可以轻松处理所有的请求和响应状态。symbiote-fetching 还提供了一组默认的状态机，以方便开发者管理各种异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d430d0927023822a57