简介
Redux 是一种流行的状态管理库，但是在使用 Redux 时，我们发现需要写很多的代码。Redux Tower 是一种在 Redux 基础之上封装的状态管理库，给我们带来了更加方便的使用方式。本篇文章介绍了如何使用 npm 包 redux-tower。
安装
npm install --save redux-tower
或者
yarn add redux-tower
使用
创建 store
import { createStore } from 'redux-tower';
const store = createStore({ state: {}, reducers: {} });Redux Tower 需要一个对象作为 createStore 的第一个参数，对象中包含一个 state 属性和一个 reducers 属性，分别用来管理状态和修改状态。
定义 reducers
import { reducers } from 'redux-tower';
const increment = (state, action) => {
return { ...state, count: state.count + action.payload };
};
reducers.count.increment = increment;这里我们定义了一个名为 increment 的 reducer，它接受两个参数 state 和 action，其中 state 是当前状态，action 是一个对象，包含了一个 type 属性和一个 payload 属性。我们在 reducer 函数中通过解构操作获取 action 的 payload 属性，然后修改状态并返回。
reducers.count.increment 表示在 count 这个状态树下注册一个名为 increment 的 reducer，代码中可以随意嵌套。
修改 state
import { actions } from 'redux-tower';
store.dispatch(actions.count.increment(1));这里我们用 dispatch 发起一个 action，actions.count.increment 表示启用 count 下的 increment reducer，并将 payload 设置为 1。
获取 state
const state = store.getState(); console.log(state.count);
通过 getState 获取到整个状态树，然后可以通过解构获取指定的状态，例如 count。
示例
下面制作一个简单的计数器示例，通过点击按钮来增加和减少计数器的值。
创建 store
import { createStore } from 'redux-tower';
const store = createStore({
state: { count: 0 },
reducers: { count: {} },
});定义 reducers
-- -------------------- ---- ------- ------ - -------- - ---- -------------- ----- --------- - ------- ------- -- - ------ - --------- ------ ----------- - -------------- -- -- ----- --------- - ------- ------- -- - ------ - --------- ------ ----------- - -------------- -- -- ------------------------ - ---------- ------------------------ - ----------
初始化 state
import { actions } from 'redux-tower';
const initialCount = 0;
store.dispatch(actions.count.increment(initialCount));创建计数器组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------------
------ - ------- - ---- --------------
----- ------- - -- ------ --------------- -------------- -- -- -
-----
----------------
------- ----------- -- -----------------------------
------- ----------- -- -----------------------------
------
--
----- --------------- - ----- -- -- ------ ----------- ---
----- ------------------ - -
--------------- ------------------------
--------------- ------------------------
--
------ ------- ------------------------ -----------------------------这里我们通过 connect 函数将当前组件和状态树以及 actions 绑定在一起，从而使得现在的组件就可以通过 props 获取状态并发起修改请求。
运行
最后，我们需要将 Counter 组件渲染到页面上。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------------
------ ------- ---- ------------
------ ----- ---- ----------
----------------
--------- --------------
-------- --
------------
--------------------------------
--结语
Redux Tower 为我们提供了更加便捷高效的状态管理方式，它通过封装 Redux，使得我们使用起来非常方便。本文介绍了 Redux Tower 的一些基本使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700fe361a36e0bce8d32