在前端开发中，Redux 已经成为了一个非常流行的状态管理工具。它能够帮助我们很好的管理应用中的状态，但是随着应用规模的扩大，Redux 的使用也变得更加复杂。比如常常出现的异步操作和副作用就需要额外的处理。这时我们可以用 @minedeljkovic/redux-side-effects 这个 npm 包来简化开发。
什么是 @minedeljkovic/redux-side-effects
@minedeljkovic/redux-side-effects 是一个 Redux 中间件，它能够帮助我们处理所有的副作用。它可以让我们在 action 中执行异步操作、打印日志、改变路由等等。
如何使用 @minedeljkovic/redux-side-effects
使用 @minedeljkovic/redux-side-effects 非常简单。首先我们需要安装它：
npm install @minedeljkovic/redux-side-effects
安装成功后，我们需要在 Redux store 中引用它：
import { createStore, applyMiddleware } from 'redux'; import sideEffectsMiddleware from '@minedeljkovic/redux-side-effects'; import rootReducer from './reducers'; const store = createStore( rootReducer, applyMiddleware(sideEffectsMiddleware) );
这样我们就成功引用了 @minedeljkovic/redux-side-effects。
@minedeljkovic/redux-side-effects 的使用
使用 @minedeljkovic/redux-side-effects 时，我们需要使用一个特殊的 action 类型。它是一个数组，包含了一个需要执行的 reducer 和一个副作用（effect）函数。比如我们要异步获取数据：
const fetchData = () => { return async (dispatch) => { const response = await fetch('/api/data'); const data = await response.json(); dispatch({ type: 'FETCH_SUCCESS', payload: data }); }; };
使用 @minedeljkovic/redux-side-effects 后，我们可以这样写：
-- -------------------- ---- ------- ----- ------------- - ---------- -- - ------ - - ----- ------------------------- -- ----- ---------- -- - ----- -------- - ----- -------------------------------------------------- ----- ---- - ----- ---------------- ---------- ----- -------------------------- -------- ---- --- - -- --展开代码
我们可以看到，它的不同之处就在于返回的是一个数组，第一个元素是 reducer，第二个元素是 effect 函数。
在 action 中使用 @minedeljkovic/redux-side-effects 也很简单。我们只需要在 action 的 payload 中将我们要执行的函数包装成数组形式即可：
-- -------------------- ---- ------- ----- --------- - -- -- - ------ - ----- ------------- -------- - - ----- --------------- -- ----- ---------- -- - ----- -------- - ----- ------------------- ----- ---- - ----- ---------------- ---------- ----- ---------------- -------- ---- --- - - -- --展开代码
这样我们就可以在 action 中使用 effect 了。
示例代码
下面是一个完整的使用 @minedeljkovic/redux-side-effects 的示例代码:
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------------- ---- ------------------------------------ ----- ------------ - - -------- ------ ------ ----- ----- ---- -- ----- ------- - ------ - ------------- ------- -- - ------ ------------- - ---- ---------------- ------ - --------- -------- ---- -- ---- ---------------- ------ - --------- -------- ------ ----- -------------- -- ---- ---------------- ------ - --------- -------- ------ ------ -------------- -- -------- ------ ------ - -- ----- --------- - -- -- - ------ - ----- ------------- -------- - - ----- --------------- -- ----- ---------- -- - --- - ----- -------- - ----- ------------------- ----- ---- - ----- ---------------- ---------- ----- ---------------- -------- ---- --- - ----- ------- - ---------- ----- ---------------- -------- ----- --- - - - -- -- ----- ----- - ------------ -------- -------------------------------------- -- ----------------------------展开代码
以上是一个使用 @minedeljkovic/redux-side-effects 的完整示例，希望能帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e24475e
