介绍
fantasyland-redux 是一个使用 Fantasyland 规范的状态管理库。它的设计思路是将所有 state 都看成是带有 Fantasyland Algebra 的对象，而 reducers 则被看成是符合 Fantasyland Monad 规范的函数，这样使得状态的操作更加直观且易于管理。
在本文中，我们将会学习如何使用 fantasyland-redux 创建一个全新的应用程序，并管理其状态。
安装
使用 npm 命令安装 fantasyland-redux:
npm install fantasyland-redux
状态对象
首先我们需要定义一个状态对象，并为其添加一些 Fantasyland Algebra。在 fantasyland-redux 中，状态对象可以是任何一个对象，只要它带有一个 fantasy-land/foldable 方法即可。举例来说，我们可以创建一个包含 name 和 age 属性的 Person 对象，如下所示：
const Person = (name, age) => ({
name,
age,
concat: ({ name: newName, age: newAge }) =>
Person(newName || name, newAge || age),
empty: () => Person('', 0)
})在上面的代码中，我们首先定义了一个函数 Person，该函数接受两个参数 name 和 age 并返回一个对象，该对象有一个 concat 方法 (Person) => Person 和一个 empty 方法 () => Person。其中，concat 方法可以将两个 Person 对象合并成一个新的对象，而 empty 则是一个空的 Person 对象。
Redux 状态管理器
接下来，我们需要创建一个 redux 状态管理器，并将我们定义的状态对象注册到其中。fantasyland-redux 中的一个核心思想就是将 reducers 看成是符合 Fantasyland Monad 规范的函数。对于一个 reducer 函数 (state, action) => state 来说，它应该接受原始状态对象 state 和一个动作对象 action，并返回一个被更新后的状态对象。
关于 fantasyland-redux 的 reducers 函数，我们可以写一个简单的例子来理解：
-- -------------------- ---- -------
----- ------- - ------- ------- -- -
----- - ----- ------- - - -------
------ ------ -
---- ------------
------ ----------------------
---- --------------
------ --------------
--------
------ ------
-
--在上面的例子中，我们首先从 action 对象中解构出 type 和 payload 属性，然后根据 type 属性的值来选择不同的修改方式。对于 setPerson 类型的动作，我们使用 concat 方法来合并上一个 Person 对象和当前的 payload 对象。而对于 clearPerson 类型的动作，则直接返回一个空的 Person 对象。
现在我们可以定义一个 store，并将上述 reducer 函数作为参数传递进去：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ -- ---- --------------------
----- ------ - ------ ---- -- --
-----
----
------- -- ----- -------- ---- ------ -- --
-------------- -- ----- ------ -- -----
------ -- -- ---------- --
---
----- ------- - ------- ------- -- -
----- - ----- ------- - - -------
------ ------ -
---- ------------
------ ----------------------
---- --------------
------ --------------
--------
------ ------
-
--
----- ------------ - ---------- ---
----- ----- - ------------------------ --------------在上面的代码中，我们首先导入了 createStore 和 fantasyland-redux，然后定义了一个 initialState，即状态对象的初始值。最后，我们通过 createStore 函数创建了一个新的 store，并将使用 FL 包装过的 reducer 函数作为参数传递进去。
现在我们已经成功地创建了一个使用 FL 规范管理状态的 store。我们可以使用 store.getState() 方法来查看当前的状态：
console.log(store.getState()); // { name: '', age: 0 }操作状态
现在我们可以定义一些操作（动作）来改变状态。对于一个操作来说，我们需要制定它的 type 属性，和一些需要传递给 reducer 的附加数据（payload）。
const setPerson = (person) => ({ type: 'setPerson', payload: person });
const clearPerson = () => ({ type: 'clearPerson' });在上面的代码中，我们定义了两个操作：setPerson 和 clearPerson。setPerson 用于向状态中添加一个新的人员信息，而 clearPerson 用于清除现有的人员信息。
我们可以通过 store.dispatch 函数，将这些操作派发给 store 来改变状态：
store.dispatch(setPerson({ name: 'John', age: 25 }));
console.log(store.getState()); // { name: 'John', age: 25 }
store.dispatch(setPerson({ name: 'Jane', age: 30 }));
console.log(store.getState()); // { name: 'JohnJane', age: 55 }
store.dispatch(clearPerson());
console.log(store.getState()); // { name: '', age: 0 }在上面的代码中，我们首先向状态中添加了两个人员信息，然后调用 clearPerson 操作清空了状态。注意，当我们添加两个人员时，他们的 name 和 age 属性被合并了起来。
总结
本文介绍了如何使用 fantasyland-redux 创建一个全新的应用程序，并管理其状态。我们首先定义了一个状态对象，并为其添加了一些 Fantasyland Algebra。然后我们创建了一个 redux 状态管理器，并将我们定义的状态对象注册到其中。最后，我们定义了一些操作（动作），并用它们来更新状态。通过本文的学习，你应该掌握了如何使用 fantasyland-redux 来管理你的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1f81e8991b448daccf