介绍
Redux Sutro 是一个基于 Redux 的状态库，它可以更优雅的处理 Redux 的 Action、Reducer 和 Store，同时具有非常高的扩展性和可定制化。本文将详细介绍如何使用 Redux Sutro。
安装
你可以使用 npm 或 yarn 安装 Redux Sutro：
npm install redux-sutro # 或者 yarn add redux-sutro
使用
创建 Store
首先，我们需要使用 createSutroStore 来创建一个 Redux Sutro 的 Store：
import { createSutroStore } from 'redux-sutro'; const store = createSutroStore();
使用 createSutroStore 创建的 Store 与使用 Redux 创建的 Store 相似，但是它更加灵活，因为它可以接收一个名为 enhancer 的函数作为第二个参数。
创建 Action
接下来，我们需要定义一些 Action，Redux Sutro 要求每个 Action 都必须以 type 属性作为唯一的标识。例如：
const ADD_TODO = 'ADD_TODO'; function addTodo(text) { return { type: ADD_TODO, text }; }
创建 Reducer
每个 Reducer 都需要接收两个参数：一个是当前状态（state），另一个是被 dispatch 的 Action。它必须返回一个全新的状态对象：
-- -------------------- ---- ------- ------ - --------------- - ---- -------------- -------- ----------- - --- ------- - ------ ------------- - ---- --------- ------ - --------- - ----- ------------ ---------- ----- - -- -------- ------ ------ - - ----- ----------- - ----------------- ----- ---展开代码
连接到组件
我们还需要将 Store 和组件连接起来：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ - ---------------- - ---- -------------- ------ --- ---- -------- ----- ----- - ------------------- ---------------- --------- -------------- ---- -- ------------ ------------------------------- --展开代码
现在，我们可以在组件中使用 connect 高阶函数连接到 Redux Store：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- -------------- ------ - ------- - ---- ------------ ----- -------- ------- --------------- - ------------------ - ------------- ---------- - - ----------- -- -- - ------------ - ----- -- - --------------- ----------- ------------------ --- -- ------------ - ----- -- - ----------------------- ----- - -------- - - ----------- ----- - ---------- - - ----------- ------------------------------ --------------- ----------- -- --- -- -------- - ----- - ----- - - ----------- ----- - ---------- - - ----------- ------ - ----- ----- ----------------------------- ------ ----------- ------------------ ---------------------------- -- ------- ----------------- ------------- ------- ---- ----------------- ------ -- - --- ---------------------------- --- ----- ------ -- - - ----- --------------- - ----- -- -- ------ ----------- --- ------ ------- -----------------------------------展开代码
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - -------- - ---- -------------- ------ - ----------------- --------------- - ---- -------------- ------ -------- ---- ------------- ------ - ------- - ---- ------------ -------- ----------- - --- ------- - ------ ------------- - ---- --------- ------ - --------- - ----- ------------ ---------- ----- - -- -------- ------ ------ - - ----- ----------- - ----------------- ----- --- ----- ----- - ------------------------------ ---------------- --------- -------------- --------- -- ------------ ------------------------------- --展开代码
总结
Redux Sutro 提供了一种更好的方式来管理和处理 Redux 的状态，你可以使用它来更加优雅地管理你的 Redux 应用。希望本篇教程能帮助你了解并使用 Redux Sutro。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8c9f
