用通俗易懂的方式解释 Redux 的工作原理

用通俗易懂的方式解释 Redux 的工作原理

在 React 组件之间传递数据往往感觉像是在玩“传声筒”游戏。你将数据从父组件传给子组件，再传给孙组件。随着应用的增长，这会变得非常混乱。

Redux 解决了这个问题。它创建了一个“单一事实来源”（single source of truth）。数据不再是零散分布的，而是统一存储在一个中央保险库中。

可以通过一家咖啡店来理解 Redux。

The Store (保险库) 这是店铺的账本。它记录着咖啡豆的数量、订单以及员工名单。

The Action (订单) 顾客不会直接从柜台上拿走一杯拿铁，而是会下单。Action 是一个简单的对象，用于描述发生了什么。 示例：{ type: 'ADD_TODO', text: 'Buy Milk' }

The Reducer (咖啡师) 咖啡师是唯一有权更新账本的人。他们接收当前状态（state）和新订单，然后创建一个新版本的账本。

The Dispatch (收银员) 收银员接收你的订单并将其交给咖啡师。Dispatch 是将你的 Action 发送到 Store 的函数。

为什么要使用 Redux？

随着你的应用扩展到包含用户资料或购物车，中央 Store 会让调试变得非常容易。你可以查看 Action 历史记录，了解数据何时以及为何发生了变化。它就像是你网站的“飞行记录仪”。

总结：

• Action：描述变更的备注。 • Reducer：执行变更的逻辑。 • Dispatch：将 Action 发送到逻辑层的触发器。

Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp