简介
redux-handler-middleware 是一个方便的 redux 中间件工具，它可以帮助我们简化编写 redux 异步 action 的代码。它调用了 redux-thunk 的功能，同时提供了一些额外的功能。
在这篇文章中，我们将学习如何使用 redux-handler-middleware。
安装
在使用 redux-handler-middleware 之前，我们需要通过 npm 安装它:
npm install --save redux-handler-middleware
引入 redux-handler-middleware
我们需要在 Redux createStore 的时候引入 redux-handler-middleware。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { reduxHandlerMiddleware } from 'redux-handler-middleware';
const store = createStore(
reducer,
applyMiddleware(thunk, reduxHandlerMiddleware)
);使用
简单的异步 action
我们可以使用 redux-handler-middleware 来简化编写 redux 异步 action 的代码。
import { createAction } from 'redux-handler-middleware';
export const loadUser = createAction({
type: 'LOAD_USERS',
method: 'get',
endpoint: '/users'
});我们可以像其他 action 一样使用它。
dispatch(loadUser());
异步 action 的处理
当我们进行异步请求时，通常我们需要在请求开始和请求结束时改变 state。我们可以使用 redux-handler-middleware 来简化这个过程。在 createAction 的时候，我们可以指定 onSuccess 或者 onError 来处理响应。这些函数需要返回一个包含需要更新的 state 的对象。下面是一个例子。
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------------- ------ ----- -------- - -------------- ----- ------------- ------- ------ --------- --------- -------- ------- ------ -- -- --------- ----- --- ---------- ------- --------- -- -- --------- ------ ------------- -- ---
当我们调用这个 action 时，如果请求成功，它会将 response.data 添加到 state.users，如果失败，它会将 error 添加到 state.error。
带参数的异步请求
我们可以传递参数到异步 action 中。
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------------- ------ ----- -------- - -------------- ----- ------------- ------- ------ --------- ------------- ------- ------- ---------- ------- --------- - -- -- -- -- --------- ----- ------------- -- --- ------------------- --- - ----
在这个例子中，我们使用了 :id 指定了 endpoint，同时通过 params 属性指定了传递给 endpoint 的参数的名称。在成功响应时，我们将 response.data 添加到 state[id] 中。
命名空间
当我们编写一个大型的应用时，我们可能会有很多的 action。我们可以使用命名空间来管理它们。
import { createAction, createActions } from 'redux-handler-middleware';
export const userActions = createActions('user', {
create: { method: 'post', endpoint: '/users' },
load: { method: 'get', endpoint: '/users/:id', params: ['id'] }
});
dispatch(userActions.load({ id: 1 }));在这个例子中，我们使用 createActions 函数来创建名为 user 的命名空间，然后通过传递 action 的配置对象来创建了两个 action：create 和 load。因为这两个 action 都与用户相关，所以它们被归类到了 user 的命名空间中。
总结
在这篇文章中，我们学习了如何使用 redux-handler-middleware 简化编写 redux 异步 action 的代码，以及如何利用它来处理异步请求、传递参数和管理命名空间。
在实际开发中，redux-handler-middleware 可以为我们提供很多方便的功能，帮助我们编写更简洁、高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005622b81e8991b448df808