redux-sugar-store 是一个优秀的 Redux 状态管理工具，它提供了一系列强大的功能来简化 Redux 的使用。它支持异步 action，简化了 reducer 和 action 的定义，提供了插件机制来增强功能以及提供了开箱即用的调试工具。在本文中，我们将详细介绍如何使用 redux-sugar-store。
安装
使用 redux-sugar-store 前，需要先安装它。可以使用 npm 或者 yarn 进行安装：
npm install redux-sugar-store
yarn add redux-sugar-store
使用
创建 store
使用 redux-sugar-store 创建 store，只需要传入一个配置对象即可。这个配置对象包含了 reducer，middlewares，plugins 等信息。
下面是一个示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ------------- ------- ---
------ ------- ------定义 action
使用 redux-sugar-store，我们可以像下面的示例代码一样定义 action：
import { createAction } from 'redux-sugar-store';
export const increment = createAction('INCREMENT');
export const decrement = createAction('DECREMENT');发出 action
除了常规的 dispatch 方式，我们也可以使用 redux-sugar-store 提供的一个异步 action 的功能。它可以让 action 的值是一个异步函数，执行这个函数是异步的，但是内部执行的同步 action，是同步执行的。异步 action 可以用来实现异步操作等场景。
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
----- ---------------- - ------------------
--------------------
-- -- -
------ --- ----------------- ------- -- -
------------- -- -
----------
-- ------
---
--
---------- --------- -- -
---------- ----- ----------- ---
-
--
-----------------------------------插件
redux-sugar-store 支持插件机制，通过插件可以增强 store 的功能，例如支持保存 state 到本地存储等。下面是一个例子：
import { addPlugin } from 'redux-sugar-store';
import persistState from 'redux-localstorage';
addPlugin(persistState());监听器
redux-sugar-store 的 store 对象支持 listeners 属性来设置 store 的监听器。当 state 变化时，所有的监听器都会被执行。下面是一个例子：
store.listeners.push(() => {
console.log(store.getState());
});调试工具
redux-sugar-store 提供了一个开箱即用的调试工具，可以用来调试 store 的状态变化。只需要在工具中安装插件即可。下面是一个例子：
import { composeWithDevTools } from 'redux-devtools-extension';
const enhancer = composeWithDevTools(); // 将 enhancer 传给 createStore
const store = createStore({ reducer, enhancer });总结
redux-sugar-store 是一个非常强大的 Redux 工具，提供了异步 action，简写的 action 和 reducer，插件，调试工具等功能。它可以大大提高 Redux 开发的效率，让开发者更加专注于业务逻辑的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8c8b