简介
atomic-redux 是一个基于 redux 的状态管理库，它的目标是使状态管理的操作变得更加简单，同时也支持异步操作。使用 atomic-redux 可以让你更快捷地构建出高质量的前端应用程序。
安装与基本使用
安装
atomic-reduxnpm install atomic-redux
在代码中使用
atomic-redux-- -------------------- ---- ------- ------ - ------------ ------------ - ---- --------------- -- ---- ------ ----- --------- - -------------------------- -- -- ----- ----- ----- - ------------- ------ - --- -- -- ----- -- ------------------ -- - ------------------------------ --- -- -- ------ ----------------------------
API 详解
createStore
创建一个 store。
function createStore<S = any, A extends Action = AnyAction>( initialState?: S, ): Store<S, A>;
initialState：初始状态
createAction
创建一个 action。
-- -------------------- ---- ------- -------- -------------- ------- ------------- --- ---------------- -------- -------------- ------- ------- --- ----- -- --------------- ------------------ -- ---------------- --- -------- -------------- ------- ------- --- ----- -- ------------ --------------- -- ------------ --- -------- -------------- ------- ------- -- --- ----- -- --------------- ------------------ ------------ --------------- -- -------------------- -- ---
type：action 的类型payloadCreator：参数创建函数metaCreator：元数据创建函数
createAsyncAction
创建一个异步 action。
-- -------------------- ---- -------
-------- ------------------
- ------- -------
- ------- ------------------------
- ------- --------------------
--
--
--
--- ---
--------------- ---
-------------- -- --
--
- - -----
- - -----
- ------- ----- - ------
------------- -- -------------- --- -- --- ---------------- ----------------- ------------- ----------------- -------------- ------------------ --actionType：action 的类型statusActions：异步 action 的状态数组，共 3 个元素，分别对应pending、success和failure三种状态
createReducer
创建一个 reducer。
function createReducer<State, A>( initialState: State, actionMap: ActionMap<State, A>, ): Reducer<State, A>;
initialState：初始状态actionMap：action 对应的处理函数
createSelector
创建一个 selector。
function createSelector<S extends Record<string, any>, R>( selector: Selector<S, R>, ): Selector<S, R>;
selector：选择器函数
示例代码
以下示例代码展示了如何使用 atomic-redux 来实现一个计数器。
-- -------------------- ---- ------- ------ - ------------ ------------- ------------- - ---- --------------- -- -- ------ ----- --------- - -------------------------- ----- --------- - -------------------------- -- -- ------- ----- -------------- - --------------- ------ - -- - ----------------- ------- -- -- ------ ----------- - - --- ----------------- ------- -- -- ------ ----------- - - --- --- -- -- ----- ----- ----- - ---------------------------- -- -- ----- -- ------------------ -- - ------------------------------ --- -- -- ------ ---------------------------- ---------------------------- ---------------------------- ----------------------------
在控制台上输出的结果如下：
{ count: 1 }
{ count: 2 }
{ count: 1 }
{ count: 2 }来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e5953