npm 包 @enzee/redux-funk 使用教程

前言

随着前端应用的复杂度增加，状态管理也变得愈发重要。Redux 作为目前前端最流行的状态管理工具之一，在许多公司和项目中得到了广泛的应用和认可。@enzee/redux-funk 是一个基于 Redux 的异步请求管理库，旨在简化 Redux 的异步 action 创建和状态管理。本文将介绍 @enzee/redux-funk 的使用方法和原理，并通过示例代码进行演示。

安装

通过 npm 或 yarn 进行安装：

npm install @enzee/redux-funk
# 或者
yarn add @enzee/redux-funk

API

createFunkMiddleware

创建一个 Redux 中间件，该中间件会拦截 Redux action，将异步 action 转换为同步 action。调用方式：

import { createFunkMiddleware } from '@enzee/redux-funk';

const middleware = createFunkMiddleware();

createFunkAction

创建一个 funk action，funk action 是一个带有惰性求值逻辑的 action，调用方式：

import { createFunkAction } from '@enzee/redux-funk';

const getUser = createFunkAction({
  type: 'GET_USER',
  getPromise: () => fetch('/api/user').then(res => res.json()),
});

store.dispatch(getUser()); // 发起异步请求

createFunkReducer

创建一个 funk reducer，funk reducer 是一个使用 funk action 管理状态的 reducer，调用方式：

-- -------------------- ---- -------
------ - ----------------- - ---- --------------------

----- ----------- - -------------------
  ----- -----------
  ------------- -
    ---------- ------
    ----- -----
  --
---

---------------- ----- ---------- --- -- ------

使用方法

中间件

使用 createFunkMiddleware 函数创建一个 Redux 中间件，然后将其添加到 Redux 的中间件组成数组中。这将启用 createFunkAction 和 createFunkReducer 函数用于管理异步请求和状态。

import { createStore, applyMiddleware } from 'redux';
import { createFunkMiddleware } from '@enzee/redux-funk';
import rootReducer from './reducers';

const middleware = createFunkMiddleware();
const store = createStore(rootReducer, applyMiddleware(middleware));

异步请求

使用 createFunkAction 函数创建一个 funk action，通过向返回的函数传递参数来发起异步请求。getPromise 函数是惰性求值的，只有在实际调用时才会被执行。

import { createFunkAction } from '@enzee/redux-funk';

const getUser = createFunkAction({
  type: 'GET_USER',
  getPromise: (id) => fetch(`/api/user/${id}`).then(res => res.json()),
});

store.dispatch(getUser(1)); // 发起异步请求

状态管理

使用 createFunkReducer 函数创建一个 funk reducer，将其添加到 Redux 的 state 中。funk reducer 将自动管理 createFunkAction 所发起的请求状态和结果。

-- -------------------- ---- -------
------ - ----------------- - ---- --------------------

----- ----------- - -------------------
  ----- -----------
  ------------- -
    ---------- ------
    ----- -----
  --
---

---------------- ----- ----------- -------- - --- - - --- -- ------

------------------------------------------ -- - ---------- ----- ----- ---- -

-- ---------- ------- ------
------------------------------------------ -- - ---------- ------ ----- - --- -- ----- ------ - -

总结

@enzee/redux-funk 是一个基于 Redux 的异步请求管理库，使得管理异步请求和状态变得更加容易。本文介绍了 @enzee/redux-funk 的使用方法和原理，并通过示例代码进行演示。我们希望这篇文章能够为你在使用 Redux 过程中遇到的异步管理问题提供一些帮助和指导。如果你有任何问题或建议，欢迎在评论中留言。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839ac