原文地址:https:///2019/... 在进行 React 技术栈的一些技术方案的「挖坟」过程中,有这样一个体会:为什么需要这样一个方案,是遇到了什么的问题,引入该方案会带来什么样的收益。任何技术方案的引入都对应了某些技术场景下遇到的问题。 Vue 的开发中引入了状态管理方案 Vuex,Vuex 的引入可有效降低组件之间的通信复杂度同时还提供了全局状态管理的能力,对于一个中大型平台来说,引入状态管理方案势在必得。 遇到的问题讨论任何技术方案,都要从遇到的问题场景入手。在 Redux 的原作者 Dan Abramov 在 我们遇到了什么问题? 在 Redux 中文文档「动机」一章中做了总结。大致有这么几个问题:
如何解决这些问题,就需要有一个统一的解决方案,最关键的一点:状态可控易管理。 显然,Redux 就是来做这些事情的。 从 Redux 的三大原则中我们就可以看出来,Redux 就是完成状态的可控易管理。 一、 单一数据源(store) 整个应用的 state 被存储在一个 store 中,管理方便,对于服务端渲染有较大优势(就是大家常说的同构应用)。 二、 state 只读 state 不能直接被修改,必须 dispatch action 去修改。一个 action 就是一个js对象,描述即将发生的事情和要携带的参数。这个原则保证了状态的修改可控 三、通过纯函数(pure function)去修改 state 纯函数有个特点,整个过程中不产生任何副作用,固定的输入必产生固定的输出。此举保证了 state 变更的可追踪性。 以上,我们也就理解了 redux 这个库在 github 上的介绍 Predictable state container for JavaScript apps Redux 都做了什么
如上所示,这是一个最简单的 Redux 的使用示例。主要做了这几件事情:
通过以上我们可以发现,这是一个完全解耦的状态管理方案,不依赖于其他的任何库,一个纯 javascript 实现。在这一点上,和 Vuex 有着本质上的区别。也就是说 Vuex 只能是在 Vue 的全家桶中使用,是一个上层的状态管理方案。Redux 不同,它可以和任何 javascript 应用开发结合使用。那么在 React 中如何集成 Redux 呢,这就是接下来我们要讨论的 React Redux。 React ReduxReact Redux 是一个在 React 中使用 Redux 方案的库。为什么引入一个状态管理方案,除了引入 Redux 还要引入 React Redux? 我们需要从 React Redux 所做的事情入手。React Redux做了什么?
综上几点,我们可以大致感知 React Redux 所做的一些事情,将一些通用的代码进行封装,暴露出 API 以简化在 React 中的使用。 有这么几个概念比较重要。 一、Provider 一个包含组件,接收 store 参数,子组件中都可以通过 connect 方法获得 store 二、connect() 一个高阶函数,返回一个 React 组件,主要做了以下两件事情:
总结以上仅仅是一个针对 Redux 和 React Redux 的大致轮廓。这个过程中还有几个问题没有讨论:
Redux 目前的维护者 Mark Erikson 在 Idiomatic Redux: The History and Implementation of React Redux 一文中针对 React Redux 的 API 版本迭代过程中进行了很透彻的分析,推荐。 参考链接
|
|