redux-remote-actions是一个用于管理异步的redux action creator的npm包。它可以解决在前端应用程序中进行异步操作时的复杂性问题。通过redux-remote-actions，可以使得异步操作在redux中进行统一的管理，从而使得前端应用程序更加的规范和易于维护。
安装
可以通过npm安装redux-remote-actions：
npm install redux-remote-actions
基本概念
RemoteAction
RemoteAction代表了一个需要在客户端和服务器中进行同步的异步操作。每个RemoteAction都有一个唯一的id，用于跟踪这个操作以及它所触发的相应的action。
ActionFactory
ActionFactory主要负责创建所有的remote actions。通过调用ActionFactory提供的工厂函数，可以创建RemoteAction。
Client
Client负责将RemoteAction发送给服务器，并将服务器的响应转换为action，并将其派发给redux store。
使用方法
在安装好redux-remote-actions之后，我们需要按照以下步骤进行使用。
Step 1: 创建action factory
import { ActionFactory } from 'redux-remote-actions';
const actionFactory = new ActionFactory();Step 2: 定义remote action
const loginAction = actionFactory.createRemoteAction('LOGIN',
(email, password) => ({
method: 'POST',
endpoint: '/api/login',
body: { email, password }
})
);在上面的例子中，我们定义了一个RemoteAction来处理用户的登录请求。该RemoteAction将会发送一个POST请求到"/api/login"，并且包含了登录的email和password。
Step 3: 添加middleware
import { applyMiddleware, createStore } from 'redux';
import createRemoteActionsMiddleware from 'redux-remote-actions';
const remoteActionsMiddleware = createRemoteActionsMiddleware();
const store = createStore(
rootReducer,
applyMiddleware(remoteActionsMiddleware)
);在store中添加middleware可以让我们通过RemoteAction来处理异步操作。
Step 4: 处理相应的action
-- -------------------- ---- -------
------ - ----------- - ---- ------------
-------- ------------------ - --- ------- -
------------------- -
---- ----------------------
------ -
---------
---------- ----
--
---- ----------------------
------ -
---------
----- ---------------
---------- ------
------ ----
--
---- -------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
-在这个例子中，我们定义了一个reducer来处理login action的不同状态。当login action触发时，登录的状态会被设置为isLoading为true。当action成功时，我们会将用户信息存入store，并将isLoading设置为false以及清除错误信息。当action失败时，我们仅仅将isLoading设置为false，并存储错误信息。
现在，我们已经完成了整个redux-remote-actions的使用过程。我们可以看到，redux-remote-actions在管理异步操作上是非常方便和易于维护的。
示例代码
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------
------ - ---------------- ----------- - ---- --------
------ ----------------------------- ---- -----------------------
----- ------------- - --- ----------------
----- ----------- - -----------------------------------------
------- --------- -- --
------- -------
--------- -------------
----- - ------ -------- -
--
--
----- ----------------------- - --------------------------------
----- ----- - ------------
------------
----------------------------------------
--
-------- ------------------ - --- ------- -
------------------- -
---- ----------------------
------ -
---------
---------- ----
--
---- ----------------------
------ -
---------
----- ---------------
---------- ------
------ ----
--
---- -------------------
------ -
---------
---------- ------
------ --------------
--
--------
------ ------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005688981e8991b448e475b