什么是Redux
"只有遇到 React实在解决不了的问题,你才需要 Redux 。"
|
Redux是由FaceBook提出的Flux框架演变而来的,所以先明确一点,Redux 是一个有用的架构,但不是非用不可。事实上大多数情况,你可以不用它,只用 React 就够了。有人说过这样一句话:"如果你不知道是否需要 Redux,那就是不需要它。"Redux 的创造者 Dan Abramov 又补充了一句:
简单说,如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。
• 用户的使用方式复杂。
• 不同身份的用户有不同的使用方式(比如普通用户和管理员)。
• 多个用户之间可以协作。
• 与服务器大量交互,或者使用了WebSocket。
• View要从多个来源获取数据。
简而言之,Redux的适用场景:多交互,多数据源。
Redux的设计
对于复杂的单页面应用,状态(state)管理非常重要。state可能包括:服务端的响应数据、本地对响应数据的缓存、本地创建的数据(比如,表单数据)以及一些 UI的状态信息(比如,路由、选中的 tab、是否显示下拉列表、页码控制等等)。如果 state变化不可预测,就会难于调试(state不易重现,很难复现一些 bug)和不易于扩展。
Redux 就是用来确保 state变化的可预测性,主要的约束有:
• state以单一对象存储在 store对象中。
• state只读。
• 使用纯函数 reducer执行 state更新。
state 为单一对象,只能通过 dispatch(action)来触发更新,更新逻辑由 reducer来执行。Redux主要还涉及以下几个概念:
• store:一个对象,它包含着应用的所有信息:
管理应用的 state
通过 store.getState()可以获取 state
通过 store.dispatch(action)来触发 state更新
通过 store.subscribe(listener)来注册 state变化监听器
通过 createStore(reducer, [initialState])创建
• action:一个对象,包含着动作的信息(至少要包含一个`type`属性,用来描述
发生了什么事)。
• reducer:是一个纯函数,函数签名为 (previousState, action) => newState,
即接受 previousState和 action两个参数,根据 action中携带的信息对 previousState做出相应的处理,并返回一个新的 state。
一个清晰的流程图能帮我们更好的理解:
从上图可以看出redux处理的是一个单向数据流:
• 用户行为或者程序调用 store.dispatch(action),向store派遣action;
• store在接收到action后,会自动呼起reducer来处理action,并且会传入俩个参
数(当前 State和收到的 Action),这里reducer可以依据数据处理逻辑拆分成多个,但是数据源store只能是一个;
• combineReducers函数会将多个子 reducer输出合并成一个单一的state树
• 生成新的UI
总结
1 如果你的页面不是很复杂,则并不需要Redux,记住它的适用场景:
多交互,多数据源;
2 redux通过限制数据更新发生的时间和方式来达到管理state的目的;
3 redux三大原则:单一store、reducer纯函数、state只读
4 在 createStore和 reducer函数中都可以初始化state。
5 redux通过dispatch、subscribe、getState实现数据的发送、监听、获取,
从而实现单向数据流的流动。