简介
redux-convenient-utils 是一个方便快捷地管理 Redux 状态的 npm 包。它提供了一些常用的工具函数，以及 connect 函数的封装，能够大大减少我们在 Redux 中的代码量，增加代码的可读性和可维护性。
安装
你可以使用 npm 或者 yarn 安装这个包：
npm install redux-convenient-utils # or yarn add redux-convenient-utils
使用
createAction
createAction(type, payloadCreator) 是 Redux 中经常用到的一个 action 创建函数的封装。我们可以使用它来快捷地创建 action。
import { createAction } from 'redux-convenient-utils';
const increase = createAction('increase');
increase(); // { type: 'increase' }
const decrease = createAction('decrease', amount => ({ amount }));
decrease(10); // { type: 'decrease', payload: { amount: 10 } }createReducer
createReducer(initialState, typeHandlers) 是一个 reducer 创建函数的封装，常常可以用于 Redux 中的 reducer 的编写。
-- -------------------- ---- ------- ------ - ------------- - ---- ------------------------- ------ - --------- -------- - ---- ------------ ----- ------------ - - ------ - -- ----- ------------ - - ----------- ----- -- -- ------ ----------- - - --- ----------- ------- ------- -- -- ------ ----------- - --------------------- --- -- ------ ------- --------------------------- --------------
connect
connect 是 React-Redux 中的一个函数，它允许我们可以将我们的组件连接到 Redux 的 store 上。redux-convenient-utils 对它进行了进一步的封装，以做到更加方便地使用它。
import { connect } from 'redux-convenient-utils';
import { increase, decrease } from './actions';
const mapStateToProps = state => ({ count: state.count });
const mapDispatchToProps = { increase, decrease };
export default connect(mapStateToProps, mapDispatchToProps)(Counter);示例代码
下面是一个完整的示例代码，使用了上面介绍的各种 Redux 管理状态的方式：
-- -------------------- ---- -------
------ - ------------- -------------- ------- - ---- -------------------------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
-- -------
----- -------- - -------------------------
----- -------- - ------------------------ ------ -- -- ------ ----
-- -------
----- ------------ - - ------ - --
----- ------------ - -
----------- ----- -- -- ------ ----------- - - ---
----------- ------- ------- -- -- ------ ----------- - --------------------- ---
--
----- -------------- - --------------------------- --------------
-- ---------
----- ------- - -- ------ --------- -------- -- -- -
-----
---------- ------------
------- ------------------------------------
------- ----------- -- --------------------- -- ----------
------
--
-- ---------
----- --------------- - ----- -- -- ------ ----------- ---
----- ------------------ - - --------- -------- --
----- ---------------- - ------------------------ -----------------------------
-- -----
----- ----- - ----------------------------
-- ---
----- --- - -- -- -
--------- --------------
----------------- --
-----------
--
------ ------- ----总结
redux-convenient-utils 是 Redux 中非常好用的一个工具函数包，它能够方便地创建 action 和 reducer，并且对 React-Redux 的 connect 函数进行了封装，使我们的代码更加简洁易读。希望这篇文章能够帮助你更好地使用它，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a6a