简介
redux-either 是一个用于处理异步数据流的中间件，它将异步请求的状态和数据封装在一个 Either 实例中，并将其通过 redux store 进行管理。该中间件非常适用于处理与网络请求相关的业务逻辑。
本文将介绍 redux-either 的使用方法，包括安装、配置和示例。
安装
使用 npm 安装 redux-either：
npm install redux-either
配置
- 导入 redux-either 和 Either 类：
import Either from "redux-either";
import { Left, Right } from "redux-either";- 创建一个 Redux store，并将 Middleware 加入：
import { createStore, applyMiddleware } from "redux";
const store = createStore(
reducers,
applyMiddleware(Either.middleware)
);- 创建一个 action，用于调用异步请求：
const fetchUser = (userId) => ({
type: "FETCH_USER",
payload: userId,
meta: {
either: true, // 标记该 action 将返回 Either 实例
},
});- 创建一个 reducer，处理异步请求的状态和数据：
-- -------------------- ---- -------
----- ------------ - -
-------- ------
----- -----
------ -----
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
-------- -----
--
---- -----------------------
------ -
---------
-------- ------
----- ---------------
--
---- ----------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
--- 将 reducer 注册到 Redux store：
import { combineReducers } from "redux";
const reducers = combineReducers({
user: userReducer,
});示例
在示例中，我们将创建一个用户列表应用程序，通过异步获取用户列表并将其显示在屏幕上。
- 创建一个 action，调用异步请求：
export const fetchUsers = () => ({
type: "FETCH_USERS",
meta: {
either: true,
},
});- 创建一个 reducer，处理异步请求的状态和数据：
-- -------------------- ---- -------
----- ------------ - -
-------- ------
----- -----
------ -----
--
------ ----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
-------- -----
--
---- ------------------------
------ -
---------
-------- ------
----- ---------------
--
---- -----------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
--- 创建一个 Redux store，加入 Middleware：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ ------ ---- --------------- ------ - ------------ - ---- -------------------------- ----- -------- - ----------------- ------ ------------- --- ----- ----- - --------------------- ------------------------------------
- 在应用程序中调用 fetchUsers()，并处理异步请求的状态和数据：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
----- ----- - -- -- -
----- ----- - ------------------- -- -------------
------------ -- -
-----------------------
-- ----
-- --------------- -
------ ----------------------
- ---- -- ------------- -
------ ----------- ----------------------------
- ---- -- ------------ -
------ -
----
---------------------- -- -
--- ------------------------------
---
-----
--
- ---- -
------ ------- ----- -------------
-
--总结
redux-either 可以很好地处理异步数据流，将异步请求的状态和数据统一封装在一个 Either 实例中，方便管理和处理。它是一个非常实用的中间件，可用于处理与网络请求相关的业务逻辑。在使用过程中，我们需要注意标记 action 的 meta 属性，以便让 redux-either middleware 自动转化成 Either 实例并进行处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ae361a36e0bce8c33