Redux基础

什么是 redux? 三大原则？

什么是redux
Redux 是一个基于 js 的全局可预测状态容器，主要用于现代前端框架中进行全局状态管理，能够在不同组件之间进行状态共享
Redux 常与 React 配合使用，但它并非只能用于 React，由于 Vue 官方推出了自己的状态管理库 Vuex，因此 Redux 很少在 Vue 中使用
Redux 的实现借鉴了 Flux， 如单项数据流。但又有别于 Flux，如全局单例 store

redux三大原则

1. 单一数据源
   store必须是唯一的，全局的state存储在单一store中

2. state是只读的
   state只能通过派发action来改变

3. reducer必须是纯函数
   reducer只做一件事情，通过累积的preState和当前的action计算得出新的state
   相同的输入必须得到相同的结果，因此reducer必须是一个纯函数

reducer中不应该出现副作用，比如发请求

为什么要用 redux

React 的定义是"一个用于构建 UI 界面的 javascript 库"，React 关注的点在于如何将状态转换为 UI(UI = fn(state))，在自带的状态管理方案中:

• state: 适用于管理自身状态，也可联合 this.props.chidren 实现 callback render
• props: 适用于父子组件传值，但父子组件嵌套过深时这种方式过于繁琐
• context: 适用于父子组件嵌套过深和兄弟组件共享状态的场景。context一般是作为局部的状态管理方案而不是全局的，因为context一旦更新，Provider下包裹的所有子组件都会重新渲染，造成性能问题

在一个复杂的应用中，数据的流向存在跨层、反向的数据流， 在交互上也存在父子、兄弟、跨组件通信， 不利于维护
而Redux只需要在最外层传入store， 内层组件即可通过props与store中的状态交互
在Redux中，数据的流动是单向的，store是全局单一的，reducer是纯函数，同样的输入得到的输出一定相同，因此状态是可预测的

什么时候用 redux

1. 某个组件的状态，需要让其他组件可以随时拿到
2. 一个组件需要改变另外一个组件的状态
3. 如果你不确定要不要用 redux，那就一定不需要用 redux

redux基本api介绍

createStore

createStore是redux的重要组成部分， 大部分api都基于它生成
以下是createStore的形参列表

1. reducer: 初始化、更新state
2. preloadedState: 默认初始化state，但一般不用它而是reducer处理init action来初始化一个state
3. enhancer: 一般用于applyMiddleWare增加中间件，作用是对createStore进行增强，覆盖原来的dispatch来实现一些功能上的拓展，如异步action、日志打印、异常监听

getState

获取state的唯一方式，用于返回当前最新的state
createStore内部维持了一个变量currentState，这个变量是私有的，对外部隐藏，只通过唯一接口getState对外暴露
react-redux connect方法底层也是通过这个api拿到state

dispatch

改变state的唯一方式，通过dispatch将用户的行为以action的形式通知给redux，通知redux把计算最新的状态并反馈给用户
如果你想在dispatch的前后做一些拓展功能，比如异步action，异常收集，日志打印，建议使用中间件来做一些增强

subscribe

订阅store的状态变化，当且仅当dispatch触发状态更新之后执行入参callback回调函数，通常我们使用这个api来实现redux和其他js库通信
react-redux底层在Provider中通过store.subscribe发起订阅，在state改变时，会检查子组件是否通过connect消费了store以及子组件的props有变化，如果这两个条件都满足，就使用最新的状态更新子组件，从而达到精确的最小粒度的render，相对于context一旦数据更新就渲染所有Provider包裹的子组件而言，这种处理方式在性能上显然是更优的

redux数据流向

1. 初始化store，此时redux会dispatch一个type为init，payload为undefined的action并从reducer拿到最初的state
2. Provider将store注入给组件，组件subscribe订阅store状态变化
3. 用户dispatch动作产生， 使用dispatch派发action给store，store将action传给reducer更新状态。dispatch的前后如果有中间件会执行中间件相关的逻辑
4. 状态更新发布之后通知订阅者，订阅者执行注册订阅的回调函数，在回调函数中可以通过getState拿到最新的状态render之后展现给用户，并且等待用户下一次动作

Redux基础

原文：https://www.cnblogs.com/ltfxy/p/15163257.html