Redux是适合定义的？有优点有哪些？

最新推荐文章于 2025-04-30 22:38:36 发布

雾漫

最新推荐文章于 2025-04-30 22:38:36 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

分类专栏： redux 文章标签： redux三大原则 redux三大原则是什么 redux简介

本文链接：https://blog.youkuaiyun.com/weixin_43532346/article/details/85158364

redux 专栏收录该内容

4 篇文章

订阅专栏

本文深入解析Redux的三大核心原则：单一数据源、State只读及使用纯函数执行修改。阐述了如何通过action描述状态变化，利用reducer处理状态更新，使应用状态管理变得清晰可控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义
当使用普通对象来描述应用的 state 时，例如，todo 应用的 state 可能长这样：

如果需要关于 Redux 所有内容的列表，推荐移步至
https://github.com/xgrommx/awesome-redux。它包含了示例、样板代码、中间件、工具库，还有很多其它相关内容。
要想学习 React 和 Redux ，https://github.com/markerikson/react-redux-links 包含了教程和不少有用的资源，https://github.com/markerikson/redux-ecosystem-links 则列出了许多 Redux 相关的库及插件。

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

这个对象就像 “Model”，区别是它并没有 setter（修改器方法）。因此其它的代码不能随意修改它，造成难以复现的 bug。
要想更新 state 中的数据，你需要发起一个 action。Action 就是一个普通 JavaScript 对象。
强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么。如果一些东西改变了，就可以知道为什么变。action 就像是描述发生了什么的指示器。最终，为了把 action 和 state 串起来，开发一些函数，这就是 reducer。再次地，没有任何魔法，reducer 只是一个接收 state 和 action，并返回新的 state 的函数。

redux的三大原则
（1）单一数据源
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，可以把应用的 state 保存在本地，从而加快开发速度。此外，受益于单一的 state tree ，以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

（2）State 是只读的
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
这样确保了视图和网络请求都不能直接修改 state，相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理，且严格按照一个接一个的顺序执行，因此不用担心 race condition 的出现。 Action 就是普通对象而已，因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

（3）使用纯函数来执行修改
Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。