Reduxr-mix是一个帮助你快速编写 Redux 应用程序的NPM包。 它可以帮助你更容易地协调执行 Redux 类型的异步操作。本教程将介绍如何使用 reducer-mix 构建一个典型的 Redux 应用程序。
安装reduxr-mix
使用 npm 包管理器可以轻松安装 reduxr-mix：
npm install --save reduxr-mix
在 Redux 应用程序中使用 reduxr-mix
当你在创建 Redux 应用程序的时候，用 Redux 的 createStore() 函数来创建 Store。在创建 Store 的同时，让 store 使用 reduxr-mix 和redux-thunk中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ - --------- - ---- ------------- ----- --------- - -------- ------- ------- - -- ----------- - ----- ----- - ------------ ---------- ---------------------- ---------- --
注意数组里的中间件的顺序很重要。在这个示例中，中间件chain 是由Thunk和ReduxrMix创建的。这就是为什么我们在 applyMiddleware 调用中首先提供 Thunk。
接下来，我们需要更新我们组件的 props 状态。要做到这一点，我们将使用 bindActionCreators 函数。它可以将不同的 action creator 转换为将被传递给组件 props 状态的对应 action。假设我们有一个名为 fetchUser() 的 action creator：
import { bindActionCreators } from 'redux';
function mapDispatchToProps(dispatch) {
return bindActionCreators({
fetchUser,
}, dispatch)
}现在我们已经将操作与 mapDispatchToProps() 包装到一起了。接下来，你可以将操作连接到组件并相应地处理它们。
执行异步操作
使用 Reducer-Mix 构造异步操作很简单。它支持多个异步中间件 - fetch, post, put 和 delete。以下是调用一个 fetch 操作的示例代码：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------------
------- --------------------------------------------
------
--
-
-接下来，我们需要在Reduer中处理这个操作：
-- -------------------- ---- -------
------ - ---------- - ---- ----------
-------- --------------- - - ----- ---- -- ------- -
------ ------------- -
-- ------ --- ----- -------
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
-此处引入了 UPDATE_TODO 操作类型，这是将被我们的 “fetch” 操作捕获并处理的类型。Fetch 操作通过在 Action 对象中传递响应数据来处理它们。最后，我们需要创建一个 fetchUser() action creator 并将其导出到组件中。
import { FETCH_USER } from './types';
import { fetchAction } from 'reduxr-mix';
export function fetchUser(userId) {
const url = `http://localhost:3000/api/users/${userId}`;
return fetchAction(FETCH_USER, url);
}在这个示例中，我们处理了一个 url 作为第二个参数传递。fetchAction 函数将请求进行处理，并将响应数据传递给 reducer 以执行状态更新。这个 action creator 将被绑定到组件 props 状态中。
我们已经完成了所有必要的步骤。现在，当用户点击 “获取用户” 按钮时，它将通过发送 HTTP GET 请求来触发 “fetchUser()” 操作。由 reduxr-mix 处理获取操作，并将响应数据导入正在运行的 reducer 中更新 Redux 状态。
结论
Reduxr-mix 可以帮助你轻松地构建和管理异步操作。这篇文章介绍了如何快速启动 Reduer-Mix，并在应用程序中使用它来成功执行一个简单的异步操作。如果你已经熟悉 Redux 开发，使用 Reduer-Mix 可以让你的开发工作更流畅。最后，通过使用 Reduer-Mix，你将拥有更好的管理异步操作和减少错误的经验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d3e