简介
react-thrux 是一种状态管理方案，使用 React Hooks 来处理状态。它提供了一种简单的方式来在不同的组件之间共享状态。
使用 react-thrux 可以解决以下的问题：
- 在不同组件间共享状态；
- 简化组件间传递状态的代码；
- 状态变化的监控与通知。
安装
使用 npm 安装 react-thrux：
--- ------- ------ -----------
基本使用
Step 1: 创建一个 store
------ - ----------- - ---- -------------- ----- ----- - ------------- ------ - --- ------ ------- ------
在上面的例子中，我们创建了一个 store，它有一个属性 count，并且初始值为 0。
Step 2: 连接一个组件
------ ----- ---- ----------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
--------- -----------------
------- ----------- -- ---------------- ----- ----------- ----
--
---------
------
--
-
------ ------- ---------------- -------在上面的例子中，我们创建了一个 Counter 组件，它显示了我们 store 中的 count 属性，并且提供了一个按钮，可以将 count 值加 1。
我们使用 connect 函数来连接 Counter 组件和 store，它会将 store 中的 count 属性传递给 Counter 组件，并且将 dispatch 函数传递给 Counter 组件，这样我们就可以发起一个 action，来修改 store 中的状态。
Step 3: 发起一个 action
------ ----- ---- ---------- ---------------- ----- ----------- ---
在上面的例子中，我们使用 store.dispatch 函数来发起一个 action，类型为 "INCREMENT"，这样我们就可以将 store 中的 count 值加 1。当状态发生变化时，与 Counter 连接的组件会自动更新。
进一步了解
支持异步
我们可以在 store 中定义一些类似 sagas 的函数，处理异步操作。
------ - ------------ ------- - ---- -------------- ----- ----- - ------------- ------ - --- ------------------------------------ ----- -- -------- -- -- - ----- --- --------------- -- ------------------- ------- ---------- ----- ----------- --- --- ------ ------- ------
在上面的例子中，我们通过 defineAction 函数，定义了一个名为 incrementAsync 的 action，它会等待一秒钟，然后再将 count 值加 1。
在组件中使用 incrementAsync:
------ ----- ---- ----------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
--------- -----------------
------- ----------- -- -------------------------- ----- -----------
------
--
-
------ ------- ---------------- -------利用 subscribe 监听状态变化
我们可以使用 subscribe 函数，监听 store 中的状态变化，当状态变化时，触发回调函数。
------ ----- ---- ---------- --------------------- -- - ------------------ ---------- ------- ---
在上面的例子中，我们使用 subscribe 函数，当 store 中的状态发生变化时，打印出 state。
结语
react-thrux 是一个非常优秀的状态管理方案，它能够帮助我们在 React 中更好地组织和共享状态，同时提供了异步操作和状态变化的监听功能。
在使用 react-thrux 的时候，需要注意的是，它只是一种状态管理方案，不是设计模式，我们需要根据实际情况，选择最适合的解决方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005583d81e8991b448d56de