当我们开发聊天机器人时，有时候需要使用 Redux 来管理状态，这时候就可以使用 botbuilder-redux-common 这个 npm 包。本文将提供该 npm 包的详细使用教程，从安装到示例，帮助前端开发人员更好地理解和使用 botbuilder-redux-common。
安装
1. 初始化 npm 项目
使用 npm，我们可以在终端操作打开我们的项目根目录，执行以下命令来初始化我们的项目：
npm init -y
执行后会生成一个 package.json 文件，这是一个 npm 项目必须的文件。
2. 安装 botbuilder-redux-common
在终端命令行中执行以下命令：
npm install botbuilder-redux-common --save
这样我们就成功安装了 botbuilder-redux-common。
使用
下面我们来看看如何使用该 npm 包。
1. 初始化 redux store
在使用 botbuilder-redux-common 之前，我们需要初始化一个 Redux store，代码如下：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ --------------- ---- -------------- ------ - -------- -- ----------- - ---- -------------------------- ----- ----------- - ----------------- --------------- -- ---------- ------- --- -- -- ----- ----- ----- - ------------ ------------ -------------------------------- --
2. 注册 middleware
在 Redux store 初始化之后，我们需要把 botbuilder-redux-common 的 middleware 注册到 Redux 中。代码如下：
import { register } from 'botbuilder-redux-common';
// 把 middleware 注册到 Redux
const botMiddleware = register(store);3. 编写 middleware
接下来，我们需要编写一个 middleware，在这个 middleware 中，我们可以获取用户发来的消息，并通过 Redux store 管理状态。在 botbuilder-redux-common 中，消息是通过 redux action 来传递的，因此我们可以监听 botbuilder-redux-common 的 action，并向用户回复消息。代码如下：
-- -------------------- ---- -------
------ - ---------- -- ------------- - ---- --------------------------
------ - ----------- - ---- ----------------------------------------
------ - --------- - ---- ------------ -- ---- ------
------ ----- ---------------- - ----- -- ---- -- ------ -- -
------ ------------- -
-- -- ----------------------- - ------
---- -----------------------
-
----- - ---- ------- - - ---------------
----- ----- - -----------------
-- ----------------
----- - ---------- - - ------------------ ------ ---------
-- -------------------- -
----------------------------- ----------------- ----------
-
-
------
-
-- ------- ----------
------ -------------
--4. 发送消息
在 middleware 中，我们通过 dispatch 发送了一条消息，我们需要定义一个 sendReply 的 action 来把消息传递给聊天机器人。代码如下：
export const SEND_REPLY = 'SEND_REPLY';
export const sendReply = (bot, reply, message) => ({
type: SEND_REPLY,
bot,
reply,
message,
});5. 绑定 middleware
最后一步，我们需要把自定义的 middleware 绑定到 Redux store 上。代码如下：
import { customMiddleware } from './customMiddleware';
store.dispatch(
bindAction({
middleware: customMiddleware,
})
);示例代码
下面是一个完整的示例代码，展示如何使用 botbuilder-redux-common：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ --------------- ---- --------------
------ -
---------- -- --------------
-------- -- ------------
-----------
- ---- --------------------------
------ - ----------- - ---- ----------------------------------------
----- ---------- - -------------
----- ----------- - -----------------
---------------
-- ---------- -------
---
-- -- -----
----- ----- - ------------
------------
--------------------------------
--
----- ---------------- - ----- -- ---- -- ------ -- -
------ ------------- -
-- -- ----------------------- - ------
---- -----------------------
-
----- - ---- ------- - - ---------------
----- ----- - -----------------
-- ----------------
----- - ---------- - - ------------------ ------ ---------
-- -------------------- -
----------------------------- ----------------- ----------
-
-
------
-
-- ------- ----------
------ -------------
--
------ ----- --------- - ----- ------ -------- -- --
----- -----------
----
------
--------
---
-- -- ----------
---------------
------------
----------- -----------------
--
--
-- ----
----- --- - ---
----- ------- - -
----- --------
--
----------------
----- -----------------------
-------- -
----
--------
--
---上述代码将发送消息 "hello" 到聊天机器人，并使用自定义的 middleware 来返回消息给用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4ccd