简介
在工程化及现代化前端开发中，State Management 已经成为了 Web 应用程序开发中的重要组成部分。 Redux 是其中最受欢迎的 State Management 库之一，它不仅推崇 immutability、单向数据流等概念，还提供了丰富的 API 和中间件生态系统。
在 redux 中，我们需要定义 action、reducers、store 等多个概念，并常常需要编写大量的重复代码。如何更加高效且规范化地使用 redux，是每个 redux 爱好者探索和思考的课题之一。
针对这个问题，我们可以使用开源 npm 包 redux-ready，利用统一的规范和约定进行快速构建 redux 应用，避免编写重复的代码。
安装
使用 npm 进行安装：
npm install --save redux-ready
使用方法
创建 Action
redux-ready 规定 action 的命名规范如下：
- 形如
XXX/ACTION_NAME的字符串； - 前面的部分代表这个 action 所属的模块或者域，每个模块或者域应该只由一个 reducer 进行处理。例如可以使用
todo作为代表 todo 领域的前缀，使用user代表用户领域的前缀； - 后面部分代表这个 action 的名称，推荐使用动宾结构，例如
todos/addTodo、users/logout等。
定义 todo 模块的类型：
-- -------------------- ---- ------- -- ------------------ ------ ----- -------- - ---------------- ------ ----- --------------------- - ---------------------------- ------ ----- ----------- - ------------------- ------ ---- -------------------- - ---------- - ------------- - ----------------- ------ --------- -------------- - ----- ------- - ------ --------- -------------------------- - ------- --------------------- - ------ --------- ----------------- - --- ------- - ------ ---- ----------- - - - ----- ------ --------- -------- -------------- - - - ----- ------ ---------------------- -------- -------------------------- - - - ----- ------ ------------ -------- ----------------- --
创建 Reducer
我们需要初始化一个 reducer 的初始状态，刚开始什么都没有：
-- -------------------- ---- -------
-- ---------------------
------ - --------- ------------ ---------------------- ------------ -------------------- - ---- ----------
------ --------- ---- -
--- -------
----- -------
---------- --------
-
------ --------- ---------- -
------ -------
----------------- ---------------------
-
------ ----- ------------- ---------- - -
------ ---
----------------- -----------
--
------ ------- -------- ------------------ - ------------- ------- ------------- ---------- -
------ ------------- -
---- ---------
----- ----- - ------------------ - --
------ -
---------
------ -
---------------
-
--- ------
----- --------------------
---------- ------
--
--
--
---- ------------
----- - -- - - ---------------
------ -
---------
------ ---------------------- -- -
-- -------- --- --- -
------ - -------- ---------- --------------- --
- ---- -
------ -----
-
---
--
---- ----------------------
------ -
---------
----------------- ----------------------
--
--------
------ ------
-
-Combiner Reducer
我们还需要将每个领域的 reducer 通过 combineReducer 合并成一个总的 reducer：
-- -------------------- ---- ------- -- --------------- ------ ------------- - ---------- - ---- ------------------- ------ - --------------- - ---- -------- ------ --------- --------- - ------ ----------- - ----- ----------- - ----------------- ------ ------------- --- ------ ------- ------------
创建 Store
最后，我们根据总的 reducer 创建一个 store：
// src/store.ts
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;
创建 Hooks
redux-ready 还提供了一些 hooks 简化了组件和 store 的交互：
useDispatch：获取 dispatch 函数。
import { useDispatch } from 'redux-ready';
function addNewTodo() {
const dispatch = useDispatch();
dispatch({ type: ADD_TODO, payload: { text: 'new todo' } });
}useSelector：获取 store 中的某个 state。类似 mapStateToProps 的作用。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
-------- ----- -
----- ----- - ------------------- -- -------------------
------ -
-----
----------------- -- -
---- -------------------------------
---
------
--
-Middleware
redux-ready 默认集成了三个中间件：
- redux-thunk：支持在 action 中编写异步逻辑；
- redux-logger：方便开发阶段 log 数据变化；
- redux-devtools：高效地调试 store。
我们可以通过丰富的选项进行自定义 middleware 配置：
-- -------------------- ---- ------- -- ------------ ------ - ---------------- ----------- - ---- -------- ------ ------------ - --------- - ---- ------------- ------ - ------- ----- - ---- -------------- ------ - ------------------- - ---- --------------------------- ----- ----- - ------------ ------------ ------------------------------------------ -------- ---------- ---- ----- -- ------ ---- ----------- - ------ --------------- ------ ----- ---------- ----------- - --------------- ------ ----- -------------- - -- -- --------------------------- ------ ---- -------------- - ------- ---------- -- -- ------ ----- -------------- - ------------- --------------- -- ---------------------- ------------- ------ ------- ------
示例代码
可以参考源码中 redux-ready-example 目录的示例代码：https://github.com/ucsd-chemical-informatics/redux-ready/tree/master/redux-ready-example
结尾
redux-ready 让 redux 的开发更加简便快捷，使同样的代码重复劳动变得不必要。使用 redux-ready，我们可以更好地关注业务的实现而不是 redux 自身的规范和约定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005542e81e8991b448d1820