前言
在前端开发中，redux 是很常用的状态管理库。而在使用 redux 过程中，我们发现 redux 的 API 显得有些繁琐，使得复杂的状态管理变得更加困难。为了解决这一问题，redux-su 库应运而生。redux-su 封装了 redux，提供了更简单、易用的 API，使得我们可以更容易地进行状态管理。本篇文章将介绍 redux-su 的使用教程，帮助读者更好地理解和使用 redux-su。
安装
在使用 redux-su 之前，我们需要先安装它。打开终端，输入以下命令进行安装：
npm install redux-su --save
使用
在安装完 redux-su 后，我们需要对 redux 进行配置。
首先，在你的应用中导入 redux 和 redux-su：
import { createStore, combineReducers } from 'redux';
import { initSuStore, suReducer } from 'redux-su';接下来，在创建 store 时，将 suReducer 添加到 combineReducers 中：
-- -------------------- ---- ------- ----- ----------- - ----------------- --- ---------- -- ------ ------- --- ----- ----- - ------------ ------------ ----------------------------------- -- ------------------------------------- -- -- ----- -------- -- -- -- --- -------- - ----- -------------------
这样，你就可以开始使用 redux-su 提供的 API 了。
API
createSuAction(type: string, payload?: any, meta?: any)
用于创建一个 redux-su 的 action。redux-su 的 action 包括三个属性：type、payload 和 meta。最简单的 action 如下：
const add = createSuAction('ADD');这里，type 是字符串 ADD，表示这是一个添加操作。payload 和 meta 都为空，表示操作没有携带其他的数据。
更加复杂的 action 如下：
const addUser = createSuAction('ADD_USER', { name: '张三' }, { gender: '男' });这里，type 是字符串 ADD_USER，表示这是一个添加用户的操作。payload 是一个对象，表示要添加的用户信息。meta 同样也是一个对象，表示用户的性别。
suFetch(url: string, actionCreators: Object, options?: Object)
用于发起一个带有 redux-su action 的网络请求。actionCreators 是一个包含了请求成功、请求失败、请求进行中三个 action 的对象。举个例子：
const fetchUsers = suFetch('https://api.github.com/users', {
success: createSuAction('FETCH_USERS_SUCCESS', data),
failure: createSuAction('FETCH_USERS_FAILURE', error),
pending: createSuAction('FETCH_USERS_PENDING')
});这里，suFetch 发起了一个 GET 请求，请求了 Github 上的所有用户。请求成功后，将会派发一个 action，type 为 FETCH_USERS_SUCCESS，表示请求成功，并且使用返回的数据更新 store 中的数据。同理，如果请求出错，将会派发 FETCH_USERS_FAILURE action，如果请求正在进行中，将会派发 FETCH_USERS_PENDING action。
createSuReducer(initialState: Object, subReducers: Object)
redux-su 的 store 中包含了数据和 reducer。createSuReducer 将帮助你创建 reducer。它接受两个参数：initialState 和 subReducers。
initialState 表示 store 的初始状态，subReducers 是一个包含了每个（子）reducer 的对象。举个例子：
-- -------------------- ---- -------
-- ---- --------------- ----- --
----- ------------ - ------ - - ---------- ----- -- ------- -- -
------ ------------- -
---- -------------
------ - ---------- ---- --
---- -------------
------ - ---------- ----- --
--------
------ ------
-
--
-- ---- ----------- ---- ------------ --- -------- -
----- ----------- - -
------ ------------
--
-- ---- -------- - -------
----- ----------- - ------------------- -------------withSu
withSu 是一个高阶组件，用于将 redux-su 的 store 注入到组件中。
首先，要将 withSu 导入到你的组件中：
import { withSu } from 'redux-su';接着，在导出组件时使用 withSu，注入 store：
class MyComponent extends React.Component {
// ...
}
export default withSu(MyComponent);这样，你就可以在组件中使用 redux-su 提供的 API 了。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ --------------- - ---- --------
------ - ------------ ---------- --------------- -------- ---------------- ------ - ---- -----------
-- ---- ------
----- --- - ----------------------
-- --------
----- ---------- - --------------------------------------- -
-------- ------------------------------------- ------
-------- ------------------------------------- -------
-------- -------------------------------------
---
-- ---- --------------- ----- --
----- ------------ - ------ - - ---------- ----- -- ------- -- -
------ ------------- -
---- -------------
------ - ---------- ---- --
---- -------------
------ - ---------- ----- --
--------
------ ------
-
--
-- ---- ----------- ---- ------------ --- -------- -
----- ----------- - -
------ ------------
--
-- ---- -------- - -------
----- ----------- - ------------------- -------------
-- ---- -----
----- ----- - ------------
------------
----------------------------------- -- ------------------------------------- -- -- ----- -------- --
--
-- --- -------- - -----
-------------------
----- ----------- ------- --------------- -
--------- - -- -- -
---------------------------
-
----------- - -- -- -
----------------------------------
-
--------------- - -- -- -
--------------------- ----- ------------ ---
-
--------------- - -- -- -
--------------------- ----- ------------ ---
-
-------- -
------ -
-----
------- ------------------------------------
------- ----------------------------- ------ -----------
------- --------------------------------- --------------
------- --------------------------------- --------------
------
--
-
-
------ ------- --------------------总结
redux-su 是一个很好用的 redux 封装库，可以让我们更加方便地管理状态。本篇文章介绍了 redux-su 的使用方法，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdc81e8991b448e68b0