知食记
搜索文档…
知食记
思维导图
归档
博客
🎃CSS
CSS基础
CSS3
SCSS
🎉JavaScript
JS 概念
JS陷阱
JS开发知识点
实现JS常见函数
实现JS 常见操作函数
JS Worker
ES6
ES6 函数
Typescript
V8
🕹️框架
Vue
基础知识
长列表性能优化
mixin
渲染函数
组件间通信
vue中的柯里化闭包
vue 渲染过程
Vue采用虚拟DOM的目的是什么
keep-alive
nextTick
vue 数组变异
vue-computed原理
vue-router原理
vue-router权限控制
路由懒加载
Vue diff原理
computed如何与视图绑定
scope css
Runtime Only vs Runtime + Compiler
集中变量管理
程序化的事件侦听器
Flux
Redux
Vuex
Vue3
React
React-Redux
React Hooks
Nuxt
Koa2
🎯算法
算法与数据结构
🎁HTML
DOM
SVG
🏈计算机网络
浏览器
计算机网络
🥊前端生态
Webpack
Babel
Fetch
Axios
Npm
Yarn
业务开发
微前端
Hexo
🏀后端
Node
Java
Python
🕹️面试
面试真经
To-do
🤖开源
开源项目
🧸其他
Linux
Git
正则
设计模式
计算机理论
Group 1
由
GitBook
提供支持
Redux
Flux 有一些缺点(特点),比如一个应用可以拥有多个 Store,多个Store之间可能有依赖关系;Store 封装了数据还有处理数据的逻辑。
所以大家在使用的时候,一般会用 Redux,他和 Flux 思想比较类似,也有差别。
1、用户通过 View 发出 Action:
1
store
.
dispatch
(
action
);
Copied!
2、然后 Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。
1
let
nextState
=
xxxReducer
(
previousState
,
action
);
Copied!
3、State 一旦有变化,Store 就会调用监听函数。
1
store
.
subscribe
(
listener
);
Copied!
4、listener可以通过 store.getState() 得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。
1
function
listerner
()
{
2
let
newState
=
store
.
getState
();
3
component
.
setState
(
newState
);
4
}
Copied!
Reducer
Redux 有很多的 Reducer,对于大型应用来说,State 必然十分庞大,导致 Reducer 函数也十分庞大,所以需要做拆分。Redux 里每一个 Reducer 负责维护 State 树里面的一部分数据,多个 Reducer 可以通过 combineReducers 方法合成一个根 Reducer,这个根 Reducer 负责维护整个 State。
对比 Flux
和 Flux 比较一下:Flux 中 Store 是各自为战的,每个 Store 只对对应的 View 负责,每次更新都只通知对应的View:
Could not load image
Redux 中各子 Reducer 都是由根 Reducer 统一管理的,每个子 Reducer 的变化都要经过根 Reducer 的整合:
Could not load image
image.png | left | 827x395
简单来说,Redux有三大原则:
单一数据源:Flux 的数据源可以是多个。
State 是只读的:Flux 的 State 可以随便改。
使用纯函数来执行修改:Flux 执行修改的不一定是纯函数。
以前
Flux
下一个
Vuex
最近更新
2yr ago
复制链接
内容
Reducer
对比 Flux