Redux、Context 和 依赖注入
date
Jul 23, 2015
slug
redux-context-and-di
status
Published
tags
Computer
summary
type
Post
Context
React 实际上隐藏了一个功能，那就是 Context，具体如何使用我这里就不举例了……
Context 本质上是所有的子组件可以访问的一个 object，但是涉及到各种问题。React 需要显式的指定想访问的变量。
Context 解决的是 props 传入层级过深的问题。有时候我们需要把一个 prop一级一级慢慢传下去……实际上是非常麻烦的。通过 Context 就可以快速获取需要的 prop。
More
React 强调的是单向数据流，Facebook 官方则提出了 Flux 架构去加强这一点。其解耦了数据的存储，数据的变更，把其分到成了 store, action（ 还有莫名其妙的 dispatcher）
所以，我们要获取数据，需要从另外的一个独立的 store 中获取。设想一下，我们抽象出了一个独立的 store，里面有许许多多的数据，我们的某一个 component 想从中获取一个数据，怎么办？
- 传统的方法，把 store 绑定到每一个 component，每一个 component 可以从 store 实例中获取自己想要的数据。
- 第一种方式其实是有问题，我们没有对访问权限进行设定，导致每一个 component 都可以修改任意的数据。我们可以稍微做一个改变，store 只绑定到根元素上，然后元素通过 props 慢慢传下去。
- 第二种就是我们之前提到的问题，props 的层级的太高。所以我们可以使用 Context 去优化。Store 绑定到根元素上的 Context，然后子组件去指定自己需要的属性……
显然，经过我们的优化之后，这已经可以解决我们的需求：
- 每个组件可以访问需要的
- 每个组件无法访问自己不要的
- 数据的存储和元素无关
实际上，这在一定程度上已经实现了依赖注入：我只申明我需要的，我不关心你如何给我。
Redux 就是基于这种思想的 Flux 实现（大概..大概..），在 Redux 中，每一个 action 和 reducer （描述 action 对 store 的影响）都是函数，其通过方法绑定到 store 上，store 实例绑定在根元素上，子元素通过 @connect 装饰器，从 store 中选出自己需要的数据就行。
思路简单，测试也变得很简单，只需要去单独测试每个函数就行。